How to implement this? Who knows? The title needs to be long. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . _html/css_WEB-ITnose

This post was last edited by sunjunchao0922 on 2013-01-05 16:39:24

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. .

Reply to the discussion (solution)

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

3b8de4e3d0c8ab0bec05b295dd9038ee



Scroll bar related color attributes:

face-color: slide block color

hightlight-color: highlight color

3dlight-color: three-dimensional light color

darkshadow-color: shadow color

shadow-color: Shadow color

arrow-color: arrow color

tack-color: slide color



scroll bar attributes:

overflow :auto is automatic, yes is yes, no is none

Overflow-x: Horizontal scroll bar

Overflow-y: Vertical scroll bar

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;

Just fix this div somewhere in the window

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