Home  >  Article  >  Web Front-end  >  The jQuery menu changes to a positioning mode with the scroll bar (fixed to the top of the browser)_jquery

The jQuery menu changes to a positioning mode with the scroll bar (fixed to the top of the browser)_jquery

WBOY
WBOYOriginal
2016-05-16 17:53:03942browse

I tried writing it myself:

Copy code The code is as follows:

$(function() {
//Get the distance between the element to be positioned and the top of the browser
var navH = $(".nav").offset().top;
//Scroll bar event
$(window ).scroll(function(){
//Get the sliding distance of the scroll bar
var scroH = $(this).scrollTop();
//The sliding distance of the scroll bar is greater than or equal to the distance of the positioned element from browsing The distance from the top of the container is fixed, otherwise it is not fixed
if(scroH>=navH){
$(".nav").css({"position":"fixed","top":0 ,"left":"50%","margin-left":"-200px"});
}else if(scroH$(".nav").css({" position":"static","margin":"0 auto"});
}
})
})

Main idea
 1. When this After the element enters the visible area and then leaves the visible area, the positioning method is changed.
 2. When the element returns to its original height at the top of the browser, restore its positioning method l
Online demo: http://demo.jb51.net/js/2012/myfix/
DEMO download: http://www.jb51.net/jiaoben/45053.html
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn