Question

我们使用一些jQuery从页面上的某个点开始使我们的导航变得粘滞，并将活动类添加到页面上的部分。目前，该类从给定高度添加到顶部（645）。但是我希望在用户滚动给定元素时添加该类，这样我们就不需要添加给定的高度。这是因为每个页面的高度都是可变的。

如何通过添加此jQuery代码来解决此问题？

代码：

<script>
$j(window).scroll(function(){
  var sticky = $j('.menu-header-product'),
      scroll = $j(window).scrollTop();

  var elementOffset=jQuery("#productnav").offset();    
  if (scroll >= elementOffset.top - 57) sticky.addClass('sticky');
  else sticky.removeClass('sticky');
});
$j(window).scroll(function(){
  var sticky = $j('.content'),
      scroll = $j(window).scrollTop();

  var elementOffset=jQuery("#productnav").offset();    
  if (scroll >= elementOffset.top - 57) sticky.addClass('sticky');
  else sticky.removeClass('sticky');
});
    $j(document).ready(function () {
        $j(document).on("scroll", onScroll);

        $j('a[href^="#"]').on('click', function (e) {
            e.preventDefault();
            $j(document).off("scroll");

            $j('a').each(function () {
                $j(this).removeClass('active');
            })
            $j(this).addClass('active');

            var target = this.hash;
            $jtarget = $j(target);
            $j('html, body').stop().animate({
            'scrollTop': $jtarget.offset().top - 120 /**just subtract the height of the fixed html part */
             }, 500, 'swing', function () {
                window.location.hash = target;
                $j(document).on("scroll", onScroll);
            });
        });
    });

function onScroll(event){
        var scrollPosition = $j(document).scrollTop();
        $j('nav a').each(function () {
            var currentLink = $j(this);
            var refElement = $j(currentLink.attr("href"));
            if (refElement.position().top - 125 <= scrollPosition && refElement.position().top - 125 + refElement.height() > scrollPosition) {
                $j('nav ul li a').removeClass("active");
                currentLink.addClass("active");
            }
            else{
                currentLink.removeClass("active");
            }
        });
    }
</script>

Answer 1

使用JQuery偏移量（http://api.jquery.com/offset/）检索所需元素的顶部像素位置。

更改此行：

if (scroll >= 645) sticky.addClass('sticky');

到此：

var elementOffset=jQuery("#YOUR_ELEMENT_ID").offset();    
if (scroll >= elementOffset.top) sticky.addClass('sticky');

编辑：

如果您的主标题高度已修复，请在定义elementOffset

后添加此标题

elementOffset.top=elementOffset.top-57;

否则，检索标题的高度，并以下列方式从elementOffset.top中减去它：

headerHeight=jQuery("#HEADER_ID").height();

当命中元素时，jQuery在滚动时添加类

1 个答案: