如何使一个div在向上滚动时固定在顶部

Question

我刚开始学习 jQuery，想要实现一个效果：当我在浏览器中向下滚动到一定位置后，让一个 div 元素滚动到页面顶部并固定在那里，就像这个网页 http://www.airbnb.com/jobs/。

- user1496872

---

哇，是的，那很棒...祝你好运，我不知道从哪里开始！！ - freefaller

这不完全相同，但几乎在同一条线上。- https://dev59.com/BWDVa4cB1Zd3GeqPfJ0t#9352465 - Vivek Chandra

有许多jQuery视差滚动插件，具有强大的API可以完成许多任务。这是我写的一个关于此的SO答案。 - arttronics

Answer 1

请尝试以下演示

这与我的其他答案类似（答案），但更改了一些值。本地JS解决方案。

代码如下：

JS：

window.onscroll=function () {
var top = window.pageXOffset ? window.pageXOffset : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
var head = document.getElementById("header")
if(top > 550){
    head.style.position = "fixed";
    head.style.height="50px"
    head.style.top="0px"
    }
    else {
if(head.getAttribute("style"))
 head.removeAttribute("style")                
    }
}

HTML：

<div class="container">
  <div id="header" class="header">
    Hello World
  </div>
</div>

CSS：

.container{
 height:2000px;
 width:100%;
 background-color:yellow;
}

.header{
 text-align:center;
 background-color:red;
 height:100px;
 position:relative;
 min-height:50px;
 width:100%;
 top:500px;
}

​

希望它有所帮助

- Vivek Chandra

---

我给你点个赞，不过你漏掉了一个细节，就是随着向下滚动，每张图片显示的数量会发生变化（这很不错）。 - Nick

Answer 2

写成这样：

$(window).scroll(function () {
                    var height = $('body').height();
                    var scrollTop = $(window).scrollTop();

                      if(scrollTop>500){
                          $('#header').css({ 'position': 'fixed', 'top' : '0' });
                    }
                      else{
                         $('#header').css({ 'position': 'relative', 'top': '500px'});
                       }
                });

Check this http://jsfiddle.net/68eXM/14/

- sandeep

Answer 3

FIDDLE演示: http://jsfiddle.net/collabcoders/PZp8R/3/

如果要添加jquery动画，您需要包含jquery、jquery.effects.core.min.js、jquery.effects.slide.min.js和jquery.effects.transfer.min.js文件。

在CSS中，您需要将div的顶部边距偏移一个负数作为动画的起点。

CSS

.tophead {  
    width:100%;
    height: 100px;
    color:#fff;
    background-color:#111;
}

.container {
    height:2000px;
    width:100%;
    margin-top:-100px;
}

.header{
    text-align:center;
    background-color:#000;
    height:100px;
    position:relative;
    min-height:100px;
    width:100%;
    top:500px;
    color: #fff;
}​

在您的 JavaScript 中，这将使整个 div 从 -100 像素向下动画到 0，在 3 秒钟内完成。

$(document).ready(function () {
    $(".container").animate({
         marginTop: "0"
    },2000);
});

$(window).scroll(function () {
    var height = $('body').height();
    var scrollTop = $(window).scrollTop();
    if(scrollTop>500){
         $('#header').css({ 'position': 'fixed', 'top' : '0' });
    } else {
         $('#header').css({ 'position': 'relative', 'top': '500px'});
   }
});

HTML

<div class="container">
    <div id="tophead" class="tophead">
      Sliding Down Container
    </div>
  <div id="header" class="header">
    Hello World
  </div>
</div>​

- Johnny

---

想把这个放进Fiddle里吗？ - Nick

Answer 4

很简单..就像这个例子一样：

$(window).scroll(function () {
    var height = $('body').height();
    var scrollTop = $(window).scrollTop();
    if(scrollTop>100){
        $('#header').css({ 'position': 'fixed', 'top' : '0', 'opacity': '0.7'});
    } else {
         $('#header').css({ 'position': 'relative', 'top': '100px', 'opacity': '1'});
    }
});

http://jsfiddle.net/PZp8R/55/

- Ahmad Seraj