CODEWITHSUNDEEP
jquerycsscross-browserscroll
sandeep
sandeep

Reputation: 92803

scrolltop() is not work smoothly in chrome & safari but work in firefox

If you check this link http://jsfiddle.net/Hbkdt/.

$(window).scroll(function() {
       $(".fixed").css("top", $(window).scrollTop() + "px");
    });

Move your scroller downward. Then you can saw the .fixed DIV work smoothly in FF but it's not work smoothly in Safari & Webkit.

I don't know how can i fix it. Any help is appreciated :)

I am using Chrome Version 22.0.1229.94 in mac.

Upvotes: 3

Views: 5035

Answers (4)

thirtydot
thirtydot

Reputation: 228142

You're only using position: absolute and setting scrollTop on the element because when position: fixed is used, if the window width is less than the width of the element, a portion of the element is then hidden, even if you scroll right to try to see it:

http://jsfiddle.net/Hbkdt/11/

A different way to approach this problem is to stick with position: fixed, and then to remedy the problem of a portion of the element being hidden:

http://jsfiddle.net/thirtydot/Hbkdt/26/

The left property of the element is on scroll set in a way that makes it appear that horizontal scrolling works as desired:

$(window).scroll(function() {
    $(".fixed").css("left", -$(window).scrollLeft() + "px"); 
});

Since position: fixed is now being used again, the vertical scrolling is perfectly smooth.

Upvotes: 2

glkz
glkz

Reputation: 101

Add a relative div inside fixed one and adjust its width on resize.

<div class="fixed">
    <div class="container">
         <ul>
            <li>Resize frame</li>
            <li>Test1</li>
            <li>Test1</li>
            <li>Test1</li>
        </ul>
        <div class="victim">Why i am not visible</div>
    </div>
</div>

​

js:

jQuery(document).ready(function($) {
    var fitWidth = function() {
        $(".fixed .container").width(Math.min(
            $(window).width(), $(".fixed").width()
        ));
    };

    $(window).resize(fitWidth);
    fitWidth();
});​

css:

.fixed {
    border:1px solid #ccc;
    position:fixed;
    top:0;
    left:0;
    width:1000px;
    background:red;
}

.container {
    background: #ff0;
    position: relative;
}

...

​ jsfiddle example

Upvotes: 1

sdespont
sdespont

Reputation: 14025

In your case, to pin your div at a fix location of your page, you need to use the CSS position fixed instead of absolute

Your scroll event can be removed and your CSS should be like this : 

.fixed {
    padding:20px;
    border:1px solid #ccc;
    position:fixed;
    top:0;
    left:0;
}​

Here is the updated fiddle : http://jsfiddle.net/Hbkdt/17/

Upvotes: 0

Starx
Starx

Reputation: 78941

I am suggesting an alternative. The most favorable option to give to the smooth effect is to animate the change in position, to fake the easing.

Something like this

$(window).scroll(function(){
    $(".fixed").stop(false, true).animate({ "top" : $(window).scrollTop()}, 1000); 
});

Demo

This works great but when you starting scrolling with the scroll pane it starts stammering again.

But, to overcome this, you can use of debouncing techniques.

$(window).scroll(function(){
    $.doTimeout( 'scroll', 250, function(){
                         // ^ This time prevents the following code to run, 
                         //   if another scrolling occurs within this time

                         //   Thus enabling us to give a smooth scroll effect
                         //   Once the user is done scroll

        $(".fixed").stop(false, true) //break the queue fast
                   .animate({ "top" : $(window).scrollTop()}, 200);
    });
});

Demo

Upvotes: 1

Related Questions