jQuery Jquery scroll to certain height problem

[lesk]

Hi, need help on this one getting real bald here :P
Im working on this website that one a page there has to be a restriction on how high you can scroll.
I have this div that is only showing a part of its content, and when i scroll I want it to stop scrolling at a height or position.

This is the code:

$(window).scroll(function() {   
if($('#servicediv').length) {
 $(window).scroll(function() {
if ($(window).scrollTop() >=380) {
$(window).scrollTop(380);
 }
 });
}
});

But the problem is that if you keep trying to scroll either with the scrollbar or with the mouse it glitches and the div keeps "twitching".

Is there anyway to make it stop twitching? I just want it to STOP and that you shouldnt be able to scroll it up anymore but you could scroll it back down again.

[AndrewGSW]

You are binding to the scroll() event twice in quick succession which may in part account for the twitching.

If '#servicediv' exists on the page then there is no need to check its length.

$(window).scroll(function () {   
    if ($(window).scrollTop() < 380) {
        $(window).scrollTop(380);
    }
});

but you'll need to test this.

[lesk]

Now it looks like this:

$(window).scroll(function() {   
if($('#servicediv')) {
$(window).scroll(function () {   
    if ($(window).scrollTop() > 380) {
        $(window).scrollTop(380);
    }
});
}
});

But it still twitches when you try to scroll more. Is there a way to make stop the function if you keep scrolling?

[AndrewGSW]

You are still attaching a handler to the scroll() event twice

[lesk]

Sorry!
Changed it to

if($('#servicediv')) {
$(this).scroll(function () {
if ($(window).scrollTop() > 380) {
$(this).stop().scrollTop(380);
}
});
}

But it still twitches when you try to scroll it further. Works great in firefox. But twitches on safari, chrome and IE

[AndrewGSW]

I recall that certain browsers trigger the scroll() event for every single movement, whereas others trigger it once when the scroll is complete (or after a certain interval..?). But this information may be out of date.

I would have thought jQuery would equalise this behaviour on the scroll() event. Otherwise, there is a de-bouncing jQuery plug-in somewhere.

[AndrewGSW]

.. actually, it just occurred to me that it may be possible to convince the browsers that a certain area (top or bottom of page?) is not scrollable using just CSS.

[lesk]

hmm de-bouncing script . I will look into that.

BUT.

I changed the code around and got this:

$(window).scroll(function(){
    if  ($(window).scrollTop() > 380){
         $('#servicediv').css({position:'relative',top:380});
    } else {
         $('#servicediv').css({top:0});
        }
});

Now it dosent twitch while scrolling down. But it twitches a bit when I want to scroll up (scroll the div down).
Dont think I cant get a css function that dosent let you scroll. I have pages that you need to scroll on also.

[AndrewGSW]

I was speculating to use absolute position, negative, and/or large margins so that the DIV is not part of a scrollable region - but I'm just thinking out loud

There are quite a number of jQuery scroll-plugins but it would require some investigation as I suspect most are to intended to achieve snazzy effects, rather than solving issues.

de-bounce

[lesk]

thanks for the link, will check it out.

I have this now:

$(window).scroll(function(){
    if  ($(window).scrollTop() > 400){
         $('#servicediv').css({position:'relative',top:400});
    } else {
         $('#servicediv').css({'top':30%});
        }
});

It basically does what I want it to do. BUT the div that scrolls up ends after the text. I have a large bg image that cover up the site. but when the div scrolls up you can see that the image is revealed behind it. I dont know how to fix this. If I have height : 100% on the div it just scrolls upp way to much.

And I dont know what height to set because on other resolution it will look weird.

Any good advice? I think it still has to do with my script

[AndrewGSW]

Height, 100% does not work as most people would anticipate: it requires all parent elements to also have this height setting, but this possibly introduces other display-concerns.

In general it is better, and easier, to explore CSS solutions before resorting to JS. I would experiment with margins, negative margins, and overflow css properties. I appreciate, however, that you might wish to experiment with the JS code that you already have. But, of course, I can only speculate as I haven't seen your page.

[lesk]

I appreciate all the help you´ve given me

I think I finally did it!

this is the JS:

$(window).scroll(function(){
    if  ($(window).scrollTop() > 200){
         $('#servicediv').css({position:'relative',top:200});
    } else {
         $('#servicediv').css({'top':30% });
        }
});

and this is the CSS:

#servicediv {
margin-top: 100px;
top:80%;
width: 100%;
background:url(images/content_bg.png);
height: auto;
position: relative;
z-index: 800;
bottom: 0;
min-height: 450px;
}
#servicewrapper {
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
height: auto;
}

Im guessing a all-time css and js programmer would go - FACEPALM on this. But it seems to be doing what I want in IE, Chrome, Firefox and Safari.

So moderators can close this topic as solved

[AndrewGSW]

Well done

You can mark it as solved when creating (or possibly editing) a post.. but I'm not sure where the option is hidden; I think it's in the options underneath the smilies.

Andy.