如何讓div跟隨jQuery順利滾動?



Answers

有一個很棒的jQuery教程,請訪問https://web.archive.org/web/20121012171851/http://jqueryfordesigners.com/fixed-floating-elements/

它複製Apple.com購物車類型的側邊欄滾動。 可能為您提供良好服務的Google查詢是“固定浮動側邊欄”。

Question

在我的容器中有部分/框,但是當沒有其他框可見時 ,這些框中的最後一個框應該跟隨滾動。

因此,當用戶向下滾動時,他會看到正常的側邊欄,但是當用戶已經足夠下降時,側邊欄會結束,但最後一個框開始跟隨屏幕頂部。 我在不同類型的網站上看到了很多。

我的代碼目前:

$(window).scroll(function(){
    $.each($('.follow-scroll'),function(){
        var eloffset = $(this).offset();
        var windowpos = $(window).scrollTop();
        if(windowpos<eloffset.top) {
            var finaldestination = 0;
        } else {
            var finaldestination = windowpos;
        }
        $(this).stop().animate({'top':finaldestination},200);
    });
});



我為此寫了一個相對簡單的答案。

我有一個表使用其中一個“粘性表頭”插件粘在我頁面上特定div的正下方,但是表格左邊的菜單沒有粘住(因為它不是表格的一部分。)

為了我的目的,我知道需要“粘性”的div總是從窗口頂部下方385像素開始,所以我在上面創建了一個空div:

<div id="stopMenu" class="stopMenu"></div>

然後運行這個:

$(window).scroll(function(){   
   if ( $(window).scrollTop() > 385 ) {
    extraPadding = $(window).scrollTop() - 385;
    $('#stopMenu').css( "padding-top", extraPadding );
   } else {
     $('#stopMenu').css( "padding-top", "0" );
   }
});

當用戶滾動時,它會將$(window).scrollTop()值添加到整數385 ,然後將該值添加到stopMenu div,該值位於我想要保持關注的事物之上。

如果用戶一直向上滾動,我只需將額外的填充設置為0。

這並不要求用戶特別在CSS中做任何事情,但是這會產生很小的延遲,所以我也把class="stopMenu"放進去:

.stopMenu {
  .transition: all 0.1s;
}



我需要div才能在到達某個對象時停止,所以我這樣做:

var el = $('#followdeal');
    var elpos_original = el.offset().top;
    $(window).scroll(function(){
        var elpos = el.offset().top;
        var windowpos = $(window).scrollTop();
        var finaldestination = windowpos;
        var stophere = ( $('#filtering').offset().top ) - 170;
        if(windowpos<elpos_original || windowpos>=stophere) {
            finaldestination = elpos_original;
            el.stop().animate({'top':10});
        } else {
            el.stop().animate({'top':finaldestination-elpos_original+10},500);
        }
    });



這對我來說就像一個魅力。

JavaScript的:

$(function() { //doc ready
    if (!($.browser == "msie" && $.browser.version < 7)) {
        var target = "#floating", top = $(target).offset().top - parseFloat($(target).css("margin-top").replace(/auto/, 0));
        $(window).scroll(function(event) {
            if (top <= $(this).scrollTop()) {
                $(target).addClass("fixed");
            } else {
                $(target).removeClass("fixed");
            }
        });
    }
});

CSS:

#floating.fixed{
    position:fixed;
    top:0;
}

資料來源: http://jqueryfordesigners.com/fixed-floating-elements/ http://jqueryfordesigners.com/fixed-floating-elements/




這是我的解決方案(希望它也足夠插件 ):

  1. 複製JS代碼部分
  2. 將“slide-along-scroll”類添加到所需的元素
  3. 在JS代碼中進行像素完美校正
  4. 希望你會喜歡它!

// SlideAlongScroll
var SlideAlongScroll = function(el) {
  var _this = this;
  this.el = el;
  // elements original position
  this.elpos_original = el.parent().offset().top;  
  // scroller timeout
  this.scroller_timeout;
  // scroller calculate function
  this.scroll = function() {
    // 20px gap for beauty
    var windowpos = $(window).scrollTop() + 20;
    // targeted destination
    var finaldestination = windowpos - this.elpos_original;
    // define stopper object and correction amount
    var stopper = ($('.footer').offset().top); // $(window).height() if you dont need it
    var stophere = stopper - el.outerHeight() - this.elpos_original - 20;
    // decide what to do
    var realdestination = 0;
    if(windowpos > this.elpos_original) {
      if(finaldestination >= stophere) {
        realdestination = stophere;
      } else {
        realdestination = finaldestination;
      }
    }
    el.css({'top': realdestination });
  };
  // scroll listener
  $(window).on('scroll', function() {
    // debounce it
    clearTimeout(_this.scroller_timeout);
    // set scroll calculation timeout
    _this.scroller_timeout = setTimeout(function() { _this.scroll(); }, 300);
  });
  // initial position (in case page is pre-scrolled by browser after load)
  this.scroll();
};
// init action, little timeout for smoothness
$(document).ready(function() {
  $('.slide-along-scroll').each(function(i, el) {
    setTimeout(function(el) { new SlideAlongScroll(el); }, 300, $(el));
  });
});
/* part you need */
.slide-along-scroll {
  padding: 20px;
  background-color: #CCCCCC;
	transition: top 300ms ease-out;
	position: relative;
}
/* just demo */
div {  
  box-sizing: border-box;
}
.side-column {
  float: left;
  width: 20%;    
}
.main-column {
  padding: 20px;
  float: right;
  width: 75%;
  min-height: 1200px;
  background-color: #EEEEEE;
}
.body {  
  padding: 20px 0;  
}
.body:after {
  content: ' ';
  clear: both;
  display: table;
}
.header {
  padding: 20px;
  text-align: center;
  border-bottom: 2px solid #CCCCCC;  
}
.footer {
  padding: 20px;
  border-top: 2px solid #CCCCCC;
  min-height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="header">
      <h1>Your super-duper website</h1>
  </div>
  <div class="body">  
    <div class="side-column">
        <!-- part you need -->
        <div class="slide-along-scroll">
            Side menu content
            <ul>
               <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
               <li>Aliquam tincidunt mauris eu risus.</li>
               <li>Vestibulum auctor dapibus neque.</li>
            </ul>         
        </div>
    </div>
    <div class="main-column">
        Main content area (1200px)
    </div>
  </div>
  <div class="footer">
      Footer (slide along is limited by it)
  </div>
</div>




Links