javascript - 我的 jquery 和 css 粘滞栏不起作用

Question

这是我用来使粘滞条适应滚动的脚本

<script language="javascript">
		$(document).ready(function() {

		$(window).scroll(function () {

		console.log($(window).scrollTop())
		if ($(window).scrollTop() > 59) {
		$('#bar).addClass('bar-fixed');
		}
		if ($(window).scrollTop() < 61) {
		$('#bar').removeClass('bar-fixed');
		}
		});
		});
		</script>
		<script language="javascript">

		$(document).ready(function() {
		$(document).foundation();
		})
		</script>

this is the css code made for the page and the sticky bar before being sticky and after becoming sticky(notice plz that the page is coded with flex so that the two side bars adjust to the center one


		@import "compass/css3";
		iframe.youtube-player {
		align: center;}
		.wrapper {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;  
		display: 

		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;

		font-weight: bold;
		text-align: center;
		}

		.wrapper > * {
		padding: 0px;
		flex: 1 100%;
		}
		.bar-fixed {
		top: 0;
		z-index: 9999;
		position: fixed;
		width: 100%;

		}

		#bar {
		width: 100%;
		height: 50px;  
		background-color: #595959;
		box-shadow: 0px 2px 2px #888888;
		}
		.topsec {
		width: 100%;
		height: 60px;  
		background-color: white;
		box-shadow: 0px 2px 2px #88888;
		text-align:left;
		display:inline-block;
		}
		.footer {
		height: 150px;  
		background-color: #333333;

		box-shadow: inset 0 20px 20px -20px black;

		}

		.main {
		text-align: left;
		background-color:white;
		min-height:1024px;
		margin-top: 55px;

		}

		.LB {
		background-color: #e6e6e6;text-align: left;max-width:200px;min-width:200px;
		margin-top: 1px;
		box-shadow: inset 0 20px 20px -20px #888888;
		}

		.RB {
		background-color: #e6e6e6;text-align: left;max-width:200px;min-width:200px;
		margin-top: 1px;box-shadow: inset 0 20px 20px -20px #888888;
		}

		@media all and (min-width: 600px) {
		.aside { flex: 1 auto; }
		}

		@media all and (min-width: 800px) {
		.main    { flex: 10 0px; }
		.LB { order: 1; } 
		.main    { order: 2; }
		.RB { order: 3; }
		.footer  { order: 4; }
		}


		body {
		padding: 0px;margin:0px;
		}

this is the html code where i put my script at the end 


		<div class="topsec">
		</div>

		<div id="bar">
		<nav ></nav>
		</div>
		<div class="wrapper">
		<article class="main">
		</article>
		<aside class="aside LB"></aside>
		<aside class="aside RB"></aside>
		<footer class="footer"></footer>
		</div>
		

Answer 1

你可以使用

if ($(window).scrollTop() > 59) {
    $('#bar').addClass('bar-fixed');
}else{
    $('#bar').removeClass('bar-fixed');
}

您检查过的代码问题 $(window).scrollTop() > 59然后检查是否$(window).scrollTop() < 61所以当你达到 59 到 61 之间时，你的代码将直接添加和删除它，我认为在这些数字之间滚动是不可能的

Note: be sure you include jquery

要包含 jquery，请在关闭 body 标记之前和运行任何脚本或调用外部 js 文件之前放置此代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Note: This is one of more ways to include jquery .. you can use this code for sure but for more information you should searching for how to install jquery

Working DEMO