滚动

Question

我正在尝试创建一个Web响应页面，当我向下滚动页面时，我的问题是将div捕捉到固定的导航栏。

https://jsfiddle.net/56jkmvma/1/

根据窗口大小或缩放，div将超出或低于导航栏。

我最好的尝试是使用scrollTop（）来阻止进一步的页面滚动一旦scrollTop（值）匹配content-div遇到导航栏的值，但它只适用于100％缩放和硬编码值。

的jQuery

$(window).scroll(function() {
  var winHeight = $(window).height();
  var navHeight = $('.nav').height();
  var stopPoint = winHeight - navHeight;// gives position where scrollTop should stop allowing the div to 'snap' to the nav bar
  var scrollPos = $(window).scrollTop();

  if (scrollPos == stopPoint) {
   $(window).scrollTop(stopPoint);
  }
});

我也试过使用anchors和scrollTo（），但从来没有正确使用过。打开任何方法，谢谢！

Answer 1

如果我理解得很好，你正在寻找像Example

这样的东西

和代码：

$(document).ready(function(){

  var heightNav=$('.nav').height();
  var posCon=$('.content').offset().top;
  var posWin;
  $(window).on('scroll',function(){
   posWin=$(this).scrollTop()+heightNav;

    if(posWin >  posCon){
      $('.content').css({
        position: 'fixed',
        top: heightNav,
        'margin-top':0

      });

    } 

    else {
      $('.content').css({
        position: 'relative',
        'margin-top':'20em',
        top:0

      });
    }

  });

});