如何让一个div向上滚动，并在顶部

Question

我是新来的jQuery，并希望做一个div向上滚动，并在顶部固定后，我向下滚动浏览器中的特定位置，就像http://www.airbnb.com/jobs/

Answer 1

写lik E本：

$(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'}); 
         } 
       }); 

入住这http://jsfiddle.net/68eXM/14/

Answer 2

修复请尝试以下步骤DEMO

这与我的其他答案（Answer）的几行值更改一致。原生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; 
} 

希望它有助于

Answer 3

FIDDLE DEMO：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这将-100 PX动画全格下降到0在3秒内

的Javascript

$(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>​ 

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/