It’s just a div as shown in the red box, it was in its proper position, , and then Well, when scrolling the page, it will stop at the top of the browser when it is about to be rolled out. Who can tell me how to achieve this? It would be best if you can provide a code example. .
Provide two ideas:
The first reference http://guohf.iteye.com/blog/605652
The second one: Use js to implement.
Principle: Window position positioning, presentation object position positioning, if the presentation object is no longer in the window position, then give the presentation object an absolute position. Reference
http://javayestome.iteye.com/blog/876021
Look at me, though Relatively simple, but the most important thing is usable.
See demo.
Core code:
(function(){ var pos = 0, qaTitle = $('.gb-qatitle-wrap'); $(window).scroll(function () { pos = $(document).scrollTop(); if (pos > 150) { qaTitle.addClass('nomenu'); if(!window.XMLHttpRequest){ qaTitle.css({position: 'absolute',top: pos + 20}); } } else { qaTitle.removeClass('nomenu'); if(!window.XMLHttpRequest){ qaTitle.css({position: 'static',top: 'auto'}); } } });}());
Is your div positioned using absolute?
Determine the position, as a separate floating layer, use js to control the position
position:fixed; bottom:100px;
CSS code?12position:fixed; bottom:100px;
Just fix this div somewhere in the window
That’s not the case,
What can be achieved with js, $(window).scroll(function () {}); when the scroll bar event is triggered, determine the position of the div. When it reaches the top of the screen, use absolute positioning, relative positioning Positioning is fine too, it will be done soon!
What can be achieved with js, $(window).scroll(function () {}); when the scroll bar event is triggered, determine the position of the div. When it reaches the top of the screen, use absolute positioning, relative positioning Positioning is fine too, it will be done soon!
How to judge whether the position of the div is at the top of the screen?
Look at this, although it is relatively simple, it is usable.
See demo.
Core code:
JavaScript code?12345678910111213141516171819(function(){ var pos = 0, qaTitle = $('.gb-qatitle-wrap'); $(window).scroll( function () { ……
Can you explain it a little bit, is .gb-qatitle-wrap the class of that div, and then nomenu is also the class of this div?
Look at this , although relatively simple, but the important thing is that it is usable.
See demo.
Core code:
JavaScript code?12345678910111213141516171819(function(){ var pos = 0, qaTitle = $('.gb-qatitle-wrap '); $(window).scroll(function () { ......
I understand it after looking at the example, but there is one thing, if (pos > 150) This 1560 is a fixed number, What if the height of this div cannot be determined?
Then get the height above through the offsetTop of that div
Then get the height above through the offsetTop of that div
Why am I using offsetTop incorrectly? I alert($(".gb-qatitle-wrap").offsetTop); Why is undefined appearing???????
There are so few ways to introduce offsetTop. I found the reason. I should write alert($(".gb-qatitle-wrap")[0].offsetTop);,,,,I don’t know why,,, ,,,,,.... . . . . . . . . . .
JS event
window.onscroll(function(){
// Code...
});
Quoting the reply from sdyngg_00 on the 8th floor: js can be achieved Yes, $(window).scroll(function () {}); when the scroll bar event is triggered, determine the position of the div. When it reaches the top of the screen, use absolute positioning or relative positioning. This will be done soon!
How to determine whether the position of the div is at the top of the screen?
$("#id").offSet().top == 0
offSet s is uppercase or lowercase, I forgot Try it