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之间时，你的代码会直接添加类和删除，我认为不可能在这些数字之间滚动

注意：请确保包含jquery

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

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

注意：这是包含jquery的更多方法之一..您可以使用它代码肯定但是有关更多信息，您应该搜索如何安装jquery

Working DEMO

Answer 2

告诉我这是否有效。如果没有，请告诉我如何改进它。

window.addEventListener('load', function() {
  var bar = document.getElementById('bar');
  window.addEventListener('scroll', function() {
    var scrollTop = document.body.scrollTop;
    if (scrollTop < 59) {
      bar.className = '';
    }
    if (scrollTop > 61) {
      bar.className = 'bar-fixed';
    }
  });
});

@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: red;
  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;
}
.bar-fixed {
  position: fixed;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

我的jquery和css粘条，不起作用

2 个答案: