Question

好的，所以我有一些粘性标签，用于在滚动时自动固定到内容区域的顶部，以便用户始终知道它们所在的类别。滚动时可以看到此http://www.codeclimb.com/menus3/index2.html标签将贴在顶部。我通过以下javascript来实现这个目标

function stickyTitles(stickies) {

this.load = function() {

          stickies.each(function(){

                var thisSticky = jQuery(this).wrap('<div class="followWrap" />');
                    thisSticky.parent().height(thisSticky.outerHeight());

                jQuery.data(thisSticky[0], 'pos', thisSticky.offset().top);

          });
    }

    this.scroll = function() {

          stickies.each(function(i){                

                var thisSticky = jQuery(this),
                      nextSticky = stickies.eq(i+1),
                      prevSticky = stickies.eq(i-1),
                      pos = jQuery.data(thisSticky[0], 'pos');

                if (pos <= jQuery(window).scrollTop()) {

                      thisSticky.addClass("fixed");

                      if (nextSticky.length > 0 && thisSticky.offset().top >= jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight()) {

                            thisSticky.addClass("absolute").css("top", jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight());

                      }

                } else {

                      thisSticky.removeClass("fixed");

                      if (prevSticky.length > 0 && jQuery(window).scrollTop() <= jQuery.data(thisSticky[0], 'pos')  - prevSticky.outerHeight()) {

                            prevSticky.removeClass("absolute").removeAttr("style");

                      }

                }
        });         
}
}

jQuery(document).ready(function(){

    var newStickies = new stickyTitles(jQuery(".followMeBar"));

    newStickies.load();

    jQuery(window).on("scroll", function() {

          newStickies.scroll();

    });
 });

但是，您可以看到这是为了将标签粘贴到浏览器的顶部而不是标题下方。目前我已经在CSS上应用了一个margin-top来使跟随栏粘到我想要的div的底部（“现在服务”部分），但你可以看到标题选项卡需要更长时间才能捕捉到下一个类别，因为当它到达浏览器的顶部时它确实在做。

因此，每当它通过“现在服务”部分时，我希望它在那里捕捉标签。

如何解决我的具体问题？

Answer 1

您可以通过计算$(window).scroll事件中标题的高度来完成此操作：

    this.scroll = function() {

          stickies.each(function(i){                

                var thisSticky = jQuery(this),
                      nextSticky = stickies.eq(i+1),
                      prevSticky = stickies.eq(i-1),
                      pos = jQuery.data(thisSticky[0], 'pos');

                if (pos - 120 <= jQuery(window).scrollTop()) {

                //**120px is the height of the header  

                      thisSticky.addClass("fixed");

                      if (nextSticky.length > 0 && thisSticky.offset().top - 120 >= jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight()) {

                            thisSticky.addClass("absolute").css("top", jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight() - 120);

                      }

                } else {

                      thisSticky.removeClass("fixed");

                      if (prevSticky.length > 0 && jQuery(window).scrollTop() <= jQuery.data(thisSticky[0], 'pos')  - prevSticky.outerHeight()) {

                            prevSticky.removeClass("absolute").removeAttr("style");

                      }

                }
        });         
}

P.S。我什么时候可以买鸡肉烤鸡肉？：）

Answer 2

我会更改这一行：
if (pos <= jQuery(window).scrollTop())
对于这样的事情：
if (pos <= jQuery(window).scrollTop() + offset)
其中offset等于标题的高度。

粘性标签附加到特定Div

2 个答案: