粘性标题 - 滚动 - CSS / jQuery

发布于 2024-12-17 09:34:31 字数 590 浏览 3 评论 0原文

我希望创建一个粘性标题。每当用户向下滚动并且原始标题消失时，“粘性”标题就应该启动。

我目前使用这个：

$(function(){
    // Check the initial Poistion of the Sticky Header
    var stickyHeaderTop = $('#sticky').offset().top;
    $(window).scroll(function(){
        if( $(window).scrollTop() > stickyHeaderTop ) {
            //$('#sticky').css({position: 'fixed', top: '0px', float: 'right'});
            $('#sticky').addClass("sticky");
        } else {
            $('#sticky').removeClass("sticky");
        }
    });
});

尽管，当前的标题在用户刚刚滚动时添加“粘性”类，而不是在用户滚动时添加“粘性”类原来的标题应该消失了。

问候

原文

I wish to create a sticky header. Everytime that the user scrolls down AND the original header goes away, then the "sticky" header should kick in.

I currently use this:

$(function(){
    // Check the initial Poistion of the Sticky Header
    var stickyHeaderTop = $('#sticky').offset().top;
    $(window).scroll(function(){
        if( $(window).scrollTop() > stickyHeaderTop ) {
            //$('#sticky').css({position: 'fixed', top: '0px', float: 'right'});
            $('#sticky').addClass("sticky");
        } else {
            $('#sticky').removeClass("sticky");
        }
    });
});

Although, the current one add the class "sticky" whenever a user just does a scroll, and not when the original header should be gone.

Regards

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

゛清羽墨安 2024-12-24 09:34:31

用带有 id="whateveryouwannacallit" 的 div 包裹他

并设置：

#whateveryouwannacalltit{
position:fixed;
top:0;
left: 0;
width:100%;
}

Wrap him with a div with id="whateveryouwannacallit"

and set:

#whateveryouwannacalltit{
position:fixed;
top:0;
left: 0;
width:100%;
}

回复收藏 0 原文

败给现实 2024-12-24 09:34:31

事实上，你不需要包装。以下是

$(document).ready(function() {
  var stuck = $('#header');
  var start = $(div).offset().top;
  $.event.add(window, "scroll", function() {
    var p = $(window).scrollTop();
    $(stuck).css('position',((p)>start) ? 'fixed' : 'static');
    $(stuck).css('top',((p)>start) ? '0px' : '');
  });
});

转到此页面的代码： http://viralpatel.net/博客/scroll-fix-header-jquery-facebook/

Actually, you won't need wrapping. Here is the code

$(document).ready(function() {
  var stuck = $('#header');
  var start = $(div).offset().top;
  $.event.add(window, "scroll", function() {
    var p = $(window).scrollTop();
    $(stuck).css('position',((p)>start) ? 'fixed' : 'static');
    $(stuck).css('top',((p)>start) ? '0px' : '');
  });
});

Credit goes to this page: http://viralpatel.net/blogs/scroll-fix-header-jquery-facebook/

回复收藏 0 原文

~没有更多了~