Question

我在页面顶部的fixed 20px网站上有一个标题。

但是，我想在滚动时抓住页面的顶部，并在用户向下滚动20px后固定到屏幕顶部。

CSS

#header{
    padding: 0px 0px 0px 0px;
    background: url(../images/header-fill2.jpg) repeat-x top;
    position: fixed;
    height: 60px;
    width: 100%;
    top: 20px;
    z-index: 5000;
}

我认为某些形式的JavaScript是必需的，但几乎没有JavaScript经验，所以任何帮助都将非常感激。

Answer 1

只需听取scroll事件并阅读$(window).scrollTop()的值，然后根据该值设置top。
类似的东西：

$(window).on('scroll', function() {
    $('#header').css('top', $(window).scrollTop() > 20 ? '0px' : '20px');
});

Example on jsFiddle

Answer 2

scroll事件会在窗口滚动时告诉您。然后，使用scrollTop找出距0更近的距离：

$(window).on("scroll", function() {
  $("#header").css("top", Math.max(0, 20 - $(window).scrollTop()));
});

Live Example

或者避免不断重新创建对象：

(function() {
  var $wnd = $(window),
      $header = $("#header");
  $wnd.on("scroll", function() {
    $header.css("top", Math.max(0, 20 - $wnd.scrollTop()));
  });
})();

Live Example

Answer 3

这就是我如何使用jQuery做到这一点。出于性能原因，该位置也被缓存：

这是一个小提琴：

http://jsfiddle.net/StephanWagner/u3yrS/

$(document).ready(function() {

    var cfixed_nav = false, wscroll;

    var setScroll = function() {
        wscroll = $(window).scrollTop();

        var fixed_nav = wscroll > 20; // Set pixel amount here

        if (fixed_nav != cfixed_nav) {
            $('body')[fixed_nav ? 'addClass' : 'removeClass']('fixed');
            cfixed_nav = fixed_nav;
        }
    };

    setScroll();
    $(document).scroll(setScroll);
});

使用CSS设置固定位置：

.fixed #header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%
}

还要记住，当标题到达固定位置时，标题的那些20px会丢失。所以你可以添加一个体填充，例如：

.fixed {
    padding-top: 20px;
}

或者你添加一个20像素高度的元素并交换显示无/块，具体取决于正文中的.fixed类

让Div＆＃34;赶上＆＃34;滚动时的页面顶部

3 个答案: