Javascript 向下滚动一点后如何粘贴 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14496240/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how can I stick the div after scrolling down a little
提问by user1012181
I wanted to stick the 2nd div when we scroll down the page and when the 2nd div meets the top boundary. When it's fixed, it should scroll along with the other pages. How can I achieve this?
当我们向下滚动页面并且当第二个 div 遇到顶部边界时，我想粘贴第二个 div。固定后，它应该与其他页面一起滚动。我怎样才能做到这一点？
#settings{
width:100%;
background:#383838;
height:60px;
}
#menu{
width:100%;
position:relative;
height:100px;
background:#aaa;
}
#body-content{
height:900px;
position:relative;
}
and the HTML
和 HTML
<body>
<div id="top">
<div id="settings">
</div>
<div id="menu">
</div>
</div>
<div id="body-content">
</div>
</body>
Here in this example http://jsfiddle.net/WBur3/, the 2nd div should be fixed when we scroll the page. When we scroll up, should turn into the previous state itself. Please help me.
在这个例子中http://jsfiddle.net/WBur3/，当我们滚动页面时，第二个 div 应该是固定的。当我们向上滚动时，应该会变成之前的状态本身。请帮我。
回答by Sowmya
You can get this effect with jquery
你可以得到这个效果 jquery
$(function(){
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('#stickyheader').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#stickyheader').css({position: 'fixed', top: '0px'});
$('#stickyalias').css('display', 'block');
} else {
$('#stickyheader').css({position: 'static', top: '0px'});
$('#stickyalias').css('display', 'none');
}
});
});
NOTE:Don't forget to include jquery library link in your page (assuming you as beginner)
注意：不要忘记在您的页面中包含 jquery 库链接（假设您是初学者）
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
回答by Erik Johnson
I would add a comment here but I don't have enough reputation to do that. I was needing something similar in a project and I thought I'd share my changes to @Sowmya's answer. I cleaned the code up a bit and made the scroll effect a lot smoother. JSfiddle
我会在这里添加评论，但我没有足够的声誉来做到这一点。我在一个项目中需要类似的东西，我想我会分享我对@Sowmya 答案的更改。我稍微清理了代码，使滚动效果更加平滑。JSfiddle
$(function () {
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('#stickyheader').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderTop) {
$('#stickyheader').css({
position: 'fixed',
top: '0px'
});
$('#othercontent').css('margin-top', $('#stickyheader').outerHeight(true) + parseInt($('#unstickyheader').css('marginBottom')));
} else {
$('#stickyheader').css({
position: 'static',
top: '0px'
});
$('#othercontent').css('margin-top', '0px');
}
});
});body {
font: 13px sans-serif;
}
#stickyheader {
width: 100%;
height: 40px;
background:black;
color:white;
margin-bottom: 10px;
}
#unstickyheader {
margin-bottom: 15px;
}回答by Jitendra Sawant
Assign an id to menu div:
为菜单 div 分配一个 id：
<div id ="menuContainer">
Include jquery in the project and on the page:
在项目和页面中包含 jquery：
<script src="Scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
Below is the code to implement desired effect:
下面是实现预期效果的代码：
<script type="text/javascript">
$("document").ready(function ($) {
// On document load get the position of the div u want to stick on certain position
var offsets = document.getElementById('menuContainer').getBoundingClientRect();
// Get position from top of browser
var topoffsets = offsets.top;
// Binding fuction to windows scroll event
$(window).bind('scroll', function () {
if ($(window).scrollTop() > topoffsets) {
$("#menuContainer").css({ top: 0, position: 'fixed' });
} else {
$("#menuContainer").css({ top: '', position: '' });
}
});
});
回答by D V Yogesh
Without `
没有`
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
/* Note: Try to remove the following lines to see the effect of CSS positioning */
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
</style>
</head>
<body>
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
<h1>Bootstrap Affix Example</h1>
<h3>Fixed (sticky) navbar on scroll</h3>
<p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
<p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Basic Topnav</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</nav>
<div class="container-fluid" style="height:1000px">
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
</div>
</body>
</html>`, we can do this by using the above code.
`，我们可以通过使用上面的代码来做到这一点。
