JS to achieve the production of suspension navigation (with source)--web Front End

Thought: Navigation here there are only two states, one is the initial state, one is the fixed layout state. The implementation of hover navigation is in fact through the JavaScript scripting language control navigation of the two States, mainly on the condition of the two states to determine the conditions, clear these, the implementation will not be too difficult.1. Basic page (HTML+CSS):

The code is as follows:

<! DOCTYPE html><!--because the main part of the page does not add specific content, scroll bar display does not appear, here use the change to exercise browser display scroll bar--><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></body>

2, JS to achieve hover navigationThe code is as follows: (insert the JS code directly into the HTML page to achieve the effect described)

<script language= "JavaScript" src= "Jquery/jquery-3.2.1.js" ></script>//invoke JQuery Framework <script type= "text /javascript ">$" (document). Ready (function () {    var toph=$ ("#top"). Height ();//Get head height, top refers to part of Var above the navigation bar    navbg=$ ("#navbg");//Gets the navigation bar object    $ (window). Scroll (function () {        if (window). scrolltop () >toph) {// Dynamically add CSS style            navbg.addclass ("Scrollnav")//to the navigation bar by comparing the distance of the scroll to the height of the upper part of the navigation bar//        }else{            navbg.removeclass (" Scrollnav ")//Remove the navigation bar added style        }    ); </script>

Source:JS Implementation of the suspension navigation production. zipNote: The article for my original reprint please indicate the source of the article will inevitably have flaws in the place also hope that we have a lot of comments or suggestions can contact me qq:2187093468 (non-prudential do not Disturb, add friends please note where to see)

JS to achieve the production of suspension navigation (with source)--web Front End