jQuery 向下滚动时如何构建浮动菜单栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17165915/
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 to build floating menu bar when scroll down
提问by Mthe beseti
When I scrolled down site display black menu bar at the top look like float bar. but I think there's jquery involved with this. I have tried CSS but seems not working for me like the way i want it to
当我向下滚动网站时，顶部的黑色菜单栏看起来像浮动栏。但我认为这涉及到 jquery。我已经尝试过 CSS，但似乎并不像我想要的那样为我工作
#menucontainer {
position:fixed;
top:0;
height: 250px
}
#firstElement {
margin-top: 250px
}
Here is the website basic idea of what I would like the menu to be like:
这是我希望菜单是什么样的网站基本概念：
回答by Kortschot
Wrap your menu in an div or section with an ID or class.
将菜单包装在带有 ID 或类的 div 或部分中。
#yourID.fixed {
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100%;
border-bottom: 5px solid #ffffff;
}
//STICKY NAV
$(document).ready(function () {
var top = $('#yourID').offset().top - parseFloat($('#yourID').css('marginTop').replace(/auto/, 100));
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y >= top) {
// if so, ad the fixed class
$('#yourID').addClass('fixed');
} else {
// otherwise remove it
$('#yourID').removeClass('fixed');
}
});
});
Can't remember where I got this from, so no salutations to me, but it worked for me.
不记得我从哪里得到的，所以没有向我致意，但它对我有用。
回答by Petr B.
i think that use Twitter Bootstrapcan help you.
我认为使用Twitter Bootstrap可以帮助你。
Look at Navbar in bootstrapand search for "Fixed to top"
Edit: If you want something like you post, combine with something like this Leave menu bar fixed on top when scrolled.
编辑：如果你想要像你发布的东西，结合这样的东西Leave menu bar fixed on top when scrolled。
When the menu has top offset equals something add class ".navbar-fixed-top".
当菜单顶部偏移等于添加类“.navbar-fixed-top”时。
回答by Ranbir Singh
Try this
尝试这个
CSS
CSS
* {margin: 0; padding: 0; outline: 0;}
body {
font-family: Helvetica, Arial, Verdana, sans-serif;
color: #999;
font-size: 12px;
background:#bfbfbf;
}
h1, h2 {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
margin:0 0 15px 0;
}
h1 {
font-size: 36px;
letter-spacing: -2px;
line-height: 100%;
}
h1.title {
font-size: 46px;
font-weight: 700;
color: #6a6a6a;
}
h2 {
font-size: 24px;
}
p {
margin: 0 0 15px 0;
}
.menuBtn {
background: center center no-repeat transparent;
background: #000;
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 10px;
}
.clear {
clear: both;
}
.wrap {
/*background:url(../images/bg.png) top left repeat-x;*/
width: 100%;
max-width: 1140px;
min-width: 960px;
z-index: 10;
position: relative;
margin: 0 auto;
padding: 0;
}
.section {
width: 100%;
max-width: 1140px;
min-width: 960px;
z-index: 10;
position: relative;
margin: 0 auto;
padding: 0 0 20px 0;
}
.inner {
width: 960px;
margin: 0 auto;
position: relative;
min-height: 50px;
padding:30px 0;
font-size: 18px;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
padding:30px 0;
}
/* This is the selector i used for my menu, it needs to be set as position:absolute; */
.subMenu {
position: absolute;
top: 462px;
height: 50px;
z-index: 1000;
width: 100%;
max-width: 1140px;
min-width: 960px;
background: #aabd46;
}
.subMenu .inner {
padding:0;
font-weight: 400;
}
.subNavBtn {
display: block;
height: 35px;
width: 12%;
float: left;
margin: 0px 0px 0 0;
text-decoration: none;
font-size: 14px;
padding: 15px 2% 0 2%;
text-align: center;
color: #fff;
}
.end {
margin: 0;
}
/* SECTIONS */
.sTop {
min-height: 630px;
background:#e5e5e5;
color:#3d3d3d;
}
.s1 {
min-height: 500px;
background: #2e2e2e;
}
.s2 {
min-height: 500px;
background: #3f3f3f;
}
.s3 {
min-height: 500px;
background: #504f4f;
}
.s4 {
min-height: 500px;
background: #6e87a1;
color: white;
}
.s5 {
min-height: 500px;
background: #293b4d;
color: white;
}
JavaScript
JavaScript
:
：
(function(){
$.fn.smint = function( options ) {
// adding a class to users div
$(this).addClass('smint')
var settings = $.extend({
'scrollSpeed ' : 500
}, options);
return $('.smint a').each( function() {
if ( settings.scrollSpeed ) {
var scrollSpeed = settings.scrollSpeed
}
///////////////////////////////////
// get initial top offset for the menu
var stickyTop = $('.smint').offset().top;
// check position and make sticky if needed
var stickyMenu = function(){
// current distance top
var scrollTop = $(window).scrollTop();
// if we scroll more than the navigation, change its position to fixed and add class 'fxd', otherwise change it back to absolute and remove the class
if (scrollTop > stickyTop) {
$('.smint').css({ 'position': 'fixed', 'top':0 }).addClass('fxd');
} else {
$('.smint').css({ 'position': 'absolute', 'top':stickyTop }).removeClass('fxd');
}
};
// run function
stickyMenu();
// run function every time you scroll
$(window).scroll(function() {
stickyMenu();
});
///////////////////////////////////////
$(this).on('click', function(e){
// gets the height of the users div. This is used for off-setting the scroll so th emenu doesnt overlap any content in the div they jst scrolled to
var selectorHeight = $('.smint').height();
// stops empty hrefs making the page jump when clicked
e.preventDefault();
// get id pf the button you just clicked
var id = $(this).attr('id');
// gets the distance from top of the div class that matches your button id minus the height of the nav menu. This means the nav wont initially overlap the content.
var goTo = $('div.'+ id).offset().top -selectorHeight;
// Scroll the page to the desired position!
$("html, body").animate({ scrollTop: goTo }, scrollSpeed);
});
});
}
})();
HTML
HTML
<!DOCTYPE html>
<html>
<head>
<title>SMINT Demo</title>
<meta name = "keywords" content = "" />
<meta name = "description" content = "" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1 user-scalable=no">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
<link href="css/demo.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.smint.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('.subMenu').smint({
'scrollSpeed' : 1000
});
});
</script>
</head>
<body>
<div class="wrap">
<div class="subMenu" >
<div class="inner">
<a href="#" id="sTop" class="subNavBtn">Home</a>
<a href="#" id="s1" class="subNavBtn">About me </a>
<a href="#" id="s2" class="subNavBtn"> Portfolio</a>
<a href="#" id="s3" class="subNavBtn">Working</a>
<a href="#" id="s4" class="subNavBtn">Hello</a>
<a href="#" id="s5" class="subNavBtn end">lets go</a>
</div>
</div>
<div class="section sTop">
<div class="inner">
<h1>Welcome to my site </h1>
<p>Click the links below !</p>
</div>
<br class="clear">
</div>
<div class="section s1">
<div class="inner">
<h1>About me </h1>
</div>
</div>
<div class="section s2">
<div class="inner">
<h1>Portfolio</h1>
</div>
</div>
<div class="section s3">
<div class="inner">
<h1>Working Standards</h1>
</div>
</div>
<div class="section s4">
<div class="inner">
<h1>Hello</h1>
</div>
</div>
<div class="section s5">
<div class="inner">
<h1>Lets Go</h1>
</div>
</div>
</div>
</body>
</html>
回答by lyfing
I tried many times for the solution @Kortschot provided, while finally it turned out to be that this solution wasn't ideal for my situation.
我为@Kortschot 提供的解决方案尝试了很多次，但最终发现该解决方案并不适合我的情况。
Here is my problem when using the solution @Kortschot provided :
这是我在使用@Kortschot 提供的解决方案时遇到的问题：
- The width of floating barcan not maintain when floating bar's states change between fix or not fix
- I want all the process can be done in just one script, while the solution @Kortschot provided doesn't fit.
- 该浮动栏的宽度时，浮动栏的状态修复或没有修复之间的变化不能维持
- 我希望所有过程都可以在一个脚本中完成，而@Kortschot 提供的解决方案不适合。
Here is my solution which can do all the work in just one script(using 1.7+ jquery):
这是我的解决方案，它可以在一个脚本中完成所有工作（使用 1.7+ jquery）：
<script>
//浮动条设置(set the floating bar)
$( function(){
//add new .fixed style to the <head>
var css = '#floating_bar.fixed{position:fixed;top:1px;z-index:9999;}',
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){ style.styleSheet.cssText = css; }
else { style.appendChild(document.createTextNode(css)); }
head.appendChild(style);
var menuOffset = $("#floating_bar")[0].offsetTop;
var menuWidth = document.getElementById("floating_bar").offsetWidth;
$(document).on("scroll", function(){
var docScroll = $(document).scrollTop();
if(docScroll >= menuOffset) {
$("#floating_bar").addClass("fixed");
//dynamically change the width of floating bar according to it's width of previous state
$("#floating_bar.fixed").width(menuWidth);
}else {
$("#floating_bar").removeClass("fixed");
}
});
});
</script>
回答by Charles Wu
In the URL that you provide, I see a menu bar fixed on the top of browser while you scroll down several lines of the page.
在您提供的 URL 中，当您向下滚动页面的几行时，我看到一个固定在浏览器顶部的菜单栏。
So I separate your problem to 2 questions: First, how to make a fixed top menu which won't be disappear when scroll the page. Second, how to make a menu fixed on top after scrolling down few lines.
所以我将您的问题分为两个问题：首先，如何制作滚动页面时不会消失的固定顶部菜单。其次，如何在向下滚动几行后将菜单固定在顶部。
For the first question, I change your css code.
对于第一个问题，我更改了您的 css 代码。
#menucontainer {
float:top;
position:fixed;
top:0;
height: 100px;
width: 100%;
background-color: eeee00; /* makes other content won't be seen when the page scrolling */
}
And I think the second question need to write js. Well I don't know yet.
而且我觉得第二个问题需要写js。嗯，我还不知道。
