Question

现在，我可以在向下滚动600px之后将div保持在顶部，但我想知道是否有其他方法可以实现这一目标。优选地，一旦它通过导航栏本身就会粘住。

var mn = $(".secondary-nav");
    mns = "secondary-nav-scrolled";

$(window).scroll(function() {
  if( $(this).scrollTop() > 600 ) {
    mn.addClass(mns);
  } else {
    mn.removeClass(mns);
  }
});

HTML

<div id="nav" class="secondary-nav one-full column">
    <ul>
      <li><a data-scroll href="#retail">Retail</a></li>
      <li><a data-scroll href="#foodservices">Food Services</a></li>
    </ul>
  </div>

CSS

.secondary-nav {
  z-index: 1000;
}

.secondary-nav-scrolled {
  position: fixed;
  width: 100%;
  top: 0;
}

Answer 1

你也可以使用这个：

$(document).scroll(function(event) {
    var nav = $('#nav').offset().top;

    if( nav >= 600 ) {
        $('#nav').addClass('fixed');
    }else {
        $('#nav').removeClass('fixed');
    }
});

Answer 2

你只需要获得导航栏的高度。

var myScroll;
var nav2 = $('#nav').height();

$(window).on('scroll',function() {
myScroll = $(document).scrollTop();

if( myScroll > nav2  ) {
$('#nav').addClass('secondary-nav-scrolled');
}else {
$('#nav').removeClass('secondary-nav-scrolled');
}
});

Answer 3

您可以尝试以下脚本：

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    if (window_top > div_top) {
        $('#nav').addClass('stick');
        $('#sticky-anchor').height($('#sticky').outerHeight());
    } else {
        $('#nav').removeClass('stick');
        $('#sticky-anchor').height(0);
    }
}

$(function() {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

请参阅Demo

滚动过去后粘贴导航

3 个答案: