[英]Using javascript to show/hide <div> when scrolling
I want to make an adoptive sticky navigation bar.我想制作一个采用性的粘性导航栏。 I have never made my own code in Javascript before.
我以前从未用 Javascript 编写过自己的代码。
My solution to this is to make two sticky navigation bars that show/hide based on scrolling.我的解决方案是制作两个基于滚动显示/隐藏的粘性导航栏。 My solution is like this:
我的解决方案是这样的:
top:100px
.top:100px
。<div>
to disappear using display:none
.<div>
使用display:none
消失。top:200px
.top:200px
的橙色导航栏。<div>
elements, to keep appear/disappear also when scrolling up and down multiple times.<div>
元素,在多次上下滚动时也能保持出现/消失。 Something is wrong with my javascript and codepen is complaining about $
being undefined.我的 javascript 有问题,codepen 抱怨
$
未定义。
https://codepen.io/G1111/pen/RwBPrPR https://codepen.io/G1111/pen/RwBPrPR
$(window).scroll(function() { Testvariable = $(window).scrollTop(); if (Testvariable == 0) { document.getElementById("stickys").style.display = "normal"; document.getElementById("stickys2").style.display = "none"; } else { document.getElementById("stickys").style.display = "none"; document.getElementById("stickys2").style.display = "normal"; } });
#stickys { top: 100px;important: background-color; yellow: height; 100px: position; fixed: position; fixed:important; box-sizing: border-box; margin: 0 0% 0 0%;important: padding; 0:important; width: calc(60vw - 0%); left: calc(20vw - 0%); right: calc(20vw - 0%); width: calc(100vw - 0%); left: 0px; right: 0px; opacity: 1; } #stickys2 { top: 200px;important: background-color; orange: height; 100px: position; fixed: position; fixed:important; box-sizing: border-box; margin: 0 0% 0 0%;important: padding; 0:important; width: calc(60vw - 0%); left: calc(20vw - 0%); right: calc(20vw - 0%); width: calc(100vw - 0%); left: 0px; right: 0px; opacity: 1; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="stickys"> My first sticky navigation bar. Show initially, then hide when slighest scroll, that is when Testvariable>0. Here, top:100px </div> <div id="stickys2"> My second sticky navigation bar. Hide initially, then show when slighest scroll, that is when Testvariable>0. Here, top: 200px. </div>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
First, replace display = "normal";
首先,替换
display = "normal";
with display = "block";
display = "block";
. .
Then, you could call $(window).scroll();
然后,你可以调用
$(window).scroll();
after binding the scroll event handler to show/hide your navbars according to the window scroll position:绑定滚动事件处理程序以根据窗口滚动位置显示/隐藏导航栏后:
$(window).scroll(function() { Testvariable = $(window).scrollTop(); if (Testvariable == 0) { document.getElementById("stickys").style.display = "block"; document.getElementById("stickys2").style.display = "none"; } else { document.getElementById("stickys").style.display = "none"; document.getElementById("stickys2").style.display = "block"; } }); $(window).scroll();
#stickys { top: 100px;important: background-color; yellow: height; 100px: position; fixed: position; fixed:important; box-sizing: border-box; margin: 0 0% 0 0%;important: padding; 0:important; width: calc(60vw - 0%); left: calc(20vw - 0%); right: calc(20vw - 0%); width: calc(100vw - 0%); left: 0px; right: 0px; opacity: 1; } #stickys2 { top: 200px;important: background-color; orange: height; 100px: position; fixed: position; fixed:important; box-sizing: border-box; margin: 0 0% 0 0%;important: padding; 0:important; width: calc(60vw - 0%); left: calc(20vw - 0%); right: calc(20vw - 0%); width: calc(100vw - 0%); left: 0px; right: 0px; opacity: 1; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="stickys"> My first sticky navigation bar. Show initially, then hide when slighest scroll, that is when Testvariable>0. Here, top:100px </div> <div id="stickys2"> My second sticky navigation bar. Hide initially, then show when slighest scroll, that is when Testvariable>0. Here, top: 200px. </div>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.