請細化：按照滾動，但粘在上面

我已經完成了我想要做的：使一個元素遵循mousescroll。如果您快速向下滾動，元素會在一段時間內看不見，然後沿着滾動回到其原始位置。這裏是第一個小提琴： http://jsfiddle.net/s4Tsy/請細化：按照滾動，但粘在上面

我也完成了使元素堅持到頂部。如果我們現在快速滾動，它永遠不會看不見。這裏是小提琴：http://jsfiddle.net/aRnAe/

我的問題是：這可以做得更優雅嗎？我相信這段代碼很笨拙。我是新手，想學習。

$(document).ready(function(){ 
    var el=$('#scrolldiv'); 
    var originalelpos = el.offset().top; 
    var scrolltimer; 
    //run on scroll 
    $(window).scroll(function(){ 
     var el=$('#scrolldiv'); // important! (local) 
     var windowpos = $(window).scrollTop(); 
     var currentpos = el.offset().top; 
     if(windowpos>=currentpos) 
     { 
      el.addClass('scrollfixed'); 
     } 
     else 
     { 
      var finaldestination = windowpos+originalelpos; 
      el.stop().animate({'top':finaldestination},2500); 
     } 
     clearTimeout(scrolltimer); 
     scrolltimer = setTimeout(afterScroll, 100); 
    }); 
    function afterScroll() { 
     currentpos = el.offset().top; 
     windowpos = $(window).scrollTop(); 
     if (currentpos <= windowpos) {  
      el.removeClass('scrollfixed'); 
      el.css({top: windowpos }); 
      finaldestination = windowpos+originalelpos; 
      el.stop().animate({'top':finaldestination},1000); 
     } 
    } 
});

親切的問候，斯蒂芬

來源

2013-06-18 user2496130

您還應該添加另一個條件來防止用戶快速滾動，您忽略了scrolldiv，您將看到第一個滾動的警告，因爲您的scrolltimer未定義，並且您試圖清除它，指定一個空的函數超時或者只是第一次添加一個標誌，因爲if（v == false）意味着它是第一次然後將其更改爲true並且僅在真實狀態中清除..除此之外，我認爲您做得很好。。關於 – CME64

謝謝。我解決了未定時器的清除問題。但是，我曾經嘗試過的第二種情況並沒有得到將div粘貼到底部的第二個條件。我知道它必須是（currentpos> = $（window）.scrollTop（）+ $（window）.height（） - el.height（）），但我無法應用適當的類。 – user2496130

這裏你去，http://jsfiddle.net/CME64/aRnAe/1/，如果你可以注意到它不是完美的，因爲div的底部不完全在頁面的底部，這是由於classlelef ，我認爲這還是很好，至少你不能忽視它:)。 – CME64

下面是結果。

>> A jsfiddle of the code below

我拿CME64的話吧的代碼就可以了。

腳本

$(document).ready(function(){ 
    var el = $('#scrolldiv'); 
    var originalelpos = el.offset().top; 
    var scrolltimer; 
    //run on scroll 
    $(window).scroll(function() { 
     var windowpos = $(window).scrollTop(); 
     var currentpos = el.offset().top; 
     if (windowpos >= currentpos) { 
      el.addClass('scrollfixed'); 
     } else if(currentpos >= $(window).scrollTop() + $(window).height() - el.height()){ 
      el.addClass('scrollfixedBtm'); 
     }else{ 
      var finaldestination = windowpos + originalelpos; 
      el.stop().animate({ 
       'top': finaldestination 
      }, 500); 
     } 
     clearTimeout(scrolltimer); 
     scrolltimer = setTimeout(afterScroll, 100); 
    }); 

    function afterScroll() { 
     currentpos = el.offset().top; 
     windowpos = $(window).scrollTop(); 
     if (currentpos <= windowpos) { 
      el.removeClass('scrollfixed'); 
      el.css({ 
       top: windowpos 
      }); 
      finaldestination = windowpos + originalelpos; 
      el.stop().animate({ 
       'top': finaldestination 
      }, 500); 
     }else if (currentpos >= $(window).scrollTop() + $(window).height() - el.height()){ 
      el.removeClass('scrollfixedBtm'); 
      el.css({ 
       top: (windowpos+$(window).height()-el.height()) 
      }); 
      finaldestination = windowpos + originalelpos; 
      el.stop().animate({ 
       'top': finaldestination 
      }, 500); 
     } 
    } 
});

CSS

.scrollfixed { 
    position: fixed !important; 
    top: 0px !important; 
} 
.scrollfixedBtm { 
    position: fixed !important; 
    top: 90% !important; 
} 
#scrolldiv { 
    position: absolute; 
    height: 100px; 
    width: 30px; 
    background-color: #f00; 
    left:0; 
    top: 100px; 
}

* HTML *（當然效果只有在長期滾動頁面可見）

<div id="scrolldiv"></div>

來源

2013-06-19 06:57:00 user2496130

請細化：按照滾動，但粘在上面

回答

相關問題