<meta HTTP - equiv="content-type" Content="text/HTML. Charset=utf-8 "/& gt;No title documents & lt;/title> <br/><style type="text/css"> <br/><br/>The fixed - nav {<br/>position: fixed; <br/>width:100%; <br/>Top: - 40 px; <br/>- its - the transition: top. 5 s; <br/>Moz - the transition: top. 5 s; <br/>- o - the transition: top. 5 s; <br/>The transition: top. 5 s; <br/>- its - box - shadow: 0 px 2 px rgba (, 0, 0, 1); <br/>- moz - box - shadow: 0 px 2 px rgba (, 0, 0, 1); <br/>Box - shadow: 0 px 2 px rgba (, 0, 0, 1); <br/>} <br/>The fixed - nav - appear {top: 0; } <br/></style> <br/></head> <br/><br/><body> <br/><Div id="Jnav" & gt; <br/>11111111 & lt; br/> 222222 <br/></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/><The script type="text/javascript" SRC="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js" & gt; </script> <br/><The script type="text/javascript" & gt; <br/><br/>Var $navxf=$(' # Jnav), navTop=$navxf. Offset (). The top, navH=$navxf. OuterHeight (), winTop_1=0, winWidth=$(window), width (), holder=jQuery (' & lt; div> '); <br/>$(window) on (' scroll ', function () {<br/>Var winTop_2=$(window). ScrollTop (); <br/>Holder. The CSS (' height 'navH); <br/>//float, but does not display, <br/>If (winTop_2 & gt; NavTop & amp; & WinWidth> 980) {<br/>Holder. The show (). The insertBefore ($navxf); <br/>$navxf. AddClass (' fixed - nav); <br/>} else {<br/>Holder. Hide (); <br/>$navxf. RemoveClass (' fixed - nav); <br/>} <br/>//judge the mouse scroll up, show, <br/>If (winTop_2 & gt; WinTop_1 & amp; & WinWidth> 980) {<br/>$navxf. RemoveClass (' fixed - nav - appear '); <br/>} else if (winTop_2 & lt; WinTop_1) {<br/>$navxf. AddClass (' fixed - nav - appear '); <br/>} <br/>WinTop_1=$(window). ScrollTop (); <br/>}) <br/></script> <br/></body> <br/></html> <br/></pre> <br/><br/>At present this code is the mouse scroll up the navigation bar at the top a floating effect, now want to add a judgment: scroll to the bottom of the page navigation bar at the top of floating, namely as www.lcwlltd.com and the site navigation bar<p class="article - content rp"> CodePudding user response: </p>Judge rolling height in a certain range will add a class to navigation<p class="article - content rp"> CodePudding user response: </p><pre> <br/><! DOCTYPE> <br/><head> <br/><meta HTTP - equiv="content-type" Content="text/HTML. Charset=utf-8 "/& gt; <br/><title> No title documents & lt;/title> <br/><style type="text/css"> <br/>The fixed - nav {<br/>position: fixed; <br/>width: 100%; <br/>Top: 0; <br/>- its - the transition: top. 5 s; <br/>Moz - the transition: top. 5 s; <br/>- o - the transition: top. 5 s; <br/>The transition: top. 5 s; <br/>- its - box - shadow: 0 px 2 px rgba (0, 0, 0, 1); <br/>- moz - box - shadow: 0 px 2 px rgba (0, 0, 0, 1); <br/>Box - shadow: 0 px 2 px rgba (0, 0, 0, 1); <br/>} <br/><br/>The fixed - nav - appear {<br/>Top: - 40 px; <br/>} <br/></style> <br/></head> <br/><br/><body> <br/><Div id="Jnav" & gt; <br/>11111111 & lt; br/> 222222 <br/></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/><The script type="text/javascript" SRC="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js" & gt; </script> <br/><The script type="text/javascript" & gt; <br/>Var $navxf=$(' # Jnav) <br/>//navTop=$navxf. Offset (). The top, <br/>.//navH=$navxf outerHeight (), <br/>//winTop_1=0, <br/>//winWidth=$(window). The width (), <br/>//holder=jQuery (' & lt; div> '); <br/>Var winTop=0 <br/>nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull </div> <div class="th_page th_page_color"></div> <div class="umCopyright"> <p>Page link：<a href="/frontend/70118.html" target="_blank" style="color:#999">https//www.codepudding.com/frontend/70118.html</a></p> </div> <div class="detail-arr"> <div class="detail-arr-left">Prev:<a href='/frontend/70117.html'>How jquery for dynamically generated multiple selected value in the radio</a></div> <div class="detail-arr-right">Next:<a href='/frontend/70575.html'>Web site in different browsers display</a></div> </div> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="hot-tags neitags"> <ul> <li><i class="iconfont icon-x-tags"></i> Tags： </li> <a href='/e/tags/?tagname=JavaScript' target='_blank'>JavaScript</a> </ul> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="xiangguan"> <ul class="msg msghead"> <li class="tbname">Related</li> </ul> <ul> </ul> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="flinks"> <ul> <li><i class="iconfont icon-x-tags"></i> Links： </li> <li class="liflinks"><a target="_blank" href="/" title="CodePudding">CodePudding</a></li> </ul> </div> </div> </div> </div> <div class="footer"> <p><span style="font-size:16px;color:#666;font-weight: bold">About Us:</span> <a href="https://www.codepudding.com/contact.html">Contact Us</a> <a href="https://www.codepudding.com/service.html">Terms of Service</a> <a href="https://www.codepudding.com/privacy.html"> Privacy Policy</a></p> <p class="foot_info">Copyright © 2010-2023，Powered By <a href="/" target="_blank">CodePudding</a> </p> </div> <script type="text/javascript" src="/skin/code/tianhu.js"></script> </body></html>
