Current position: home page > Website design >JQ intelligent judgment fixed navigation bar or sidebar

JQ intelligent judgment fixed navigation bar or sidebar

Author: blueleaf Classification: Website design Time: 2014-05-20 Browse: 16473 Comments: 20

This is a special effect code that can only judge the fixed DIV layer. With this JQ intelligent code, you can set the fixed display of the navigation bar, sidebar, and any DIV layer; Now, the JQ intelligent judgment fixed navigation bar is used by the Blueleaf station. If you want to see the demo, please pull down the page scroll bar, and you will see that the navigation bar is fixed; To use this code, you need to reference the JS file of the JQ library on the page. Current websites generally reference the JQ library code. If not, open the Template , add<script src to the page header or page position=“ http://libs.baidu.com/ jquery /1.7.1/jquery.min.js" type="text/ javascript "></script>Save the code, which is the successfully referenced JQ library code; please refer to the following instructions for specific JQ intelligent judgment on how to use the fixed navigation bar or sidebar code:

 CSS style of topfixed: .topfixed {position:fixed; top:0;left:0;width:100%;z-index:9000;webkit-box-shadow:0px 4px 4px #baacc9;-moz-box-shadow:0px 4px 4px #baacc9;box-shadow: 0px 4px 4px #baacc9;background:#fff; }
 JQ code: <script> $(window).scroll(function(){ if($(this).scrollTop()>220){ $('#nav').addClass('topfixed');}  else { $('#nav').removeClass('topfixed'); }}); </script> Note: When the drop-down scroll bar is 220px away from the head, a CSS style topfixed will be added to the # nav style DIV layer to make it fixed. 220 in the above code is the distance from the drop-down scroll bar to the head. Please modify how to set it yourself. # nav is the name of the CSV style of the DIV layer you need to fix.

Disclaimer:

Website: Click Copy to share with friends!

All content resources shared by this website, if not noted, are original by Blueleaf. If you need to reprint, please indicate the source; Please contact us in case of infringement Contact handling Please understand!

Comment List
 blink the eyes kiss Growl happy think poor It's embarrassing Grievance ha-ha hush Right hum Zuo Hum Hum doubt A bad laugh Make money Sadness Be cool Seduce fierce handshake yeah Hee hee Shyness applause greedy Madness Embrace gather and watch Mighty awesome
Submit comments

Clear information
Close Comment
 He Lechen
He Lechen tourist
#9
After studying for a day, I still can't use it.
2016-06-25 20:16 reply
 blueleaf
blueleaf tourist
@He Lechen: Please learn the basic knowledge of jquery from Baidu.
2016-06-28 11:09 reply
 xinxindejing
xinxindejing tourist
#8
If the mobile phone slides quickly, it takes half a beat to appear, which is not very good
2016-05-26 13:26 reply
 Cloud library network
Cloud library network tourist
#7
The Asahi Bear blog also uses the navigation at the bottom, but if you use a mobile phone to access it, it will be a little stuck. The navigation will not open until the page is loaded!!!????
2015-11-21 08:57 reply
 blueleaf
blueleaf tourist
@Alibaba Cloud: This jquery code is loaded when the page is completely loaded.
2015-11-21 16:13 reply
 Young Master of the Great Zhou Dynasty
Young Master of the Great Zhou Dynasty tourist
#6
I tried it. It's good. Now I can fix my sidebar on the side after the end,
2015-01-03 00:36 reply
 tourist
tourist tourist
#5
This doesn't seem to work well in IE6
2014-10-14 11:09 reply
 wuxc
wuxc tourist
#4
Can you put him in the middle?
2014-07-20 20:55 reply
 Joyc
Joyc tourist
#3
Is this a plug-in in Baidu Cloud's collection?
2014-06-17 01:51 reply
 No purity
No purity tourist
#2
It's not right to have a good party...
2014-05-21 01:13 reply
 blueleaf
blueleaf tourist
@No purity: Are you scared
2014-05-21 01:15 reply
 No purity
No purity tourist
@Blueleaf: I'm really scared... Great effect
2014-05-21 02:11 reply
 blueleaf
blueleaf tourist
@No purity:
2014-05-21 02:12 reply
 Xuanyin Blog
Xuanyin Blog tourist
@Lan Ye: How to use it
2014-06-22 14:14
 Domineering
Domineering tourist
#1
Not bad, give me some support
2014-05-20 15:40 reply
 blueleaf
blueleaf tourist
@Bully: You are so fast.
2014-05-20 15:42 reply
 Domineering
Domineering tourist
@Blue leaf: Subscribed, hey hey
2014-05-20 15:43 reply
 blueleaf
blueleaf tourist
@Bully: Thank you for your support. There are many pop-up windows in your station.
2014-05-20 15:45 reply
 Domineering
Domineering tourist
@Lan Ye: Not many, just one
2014-05-20 15:45
music appreciation
Back to top