CODEWITHSUNDEEP
jqueryhtmlcss
jerneva
jerneva

Reputation: 465

Returns fixed cart to original position after scroll down

I have a fixed shopping cart that works perfectly. On page load the cart is positioned 350px from the top of the page, after scrolling 350px down the page the shopping cart becomes fixed to the page, my problem is the shopping cart on scroll up the shopping cart goes all the way back to the top of the page, instead of going back to its original position.

How do i do that?

$(window).on("scroll", function() {
            if($(window).scrollTop() > 350) {
                $("#stickycart").css("margin-top", "0","right",$(window).scrollTop());
              
            }
        });
#stickycart{
    width: 25%;
    float:right;
    margin: 20px;
    margin-top:450px;
    float:right;
    right:0;
    top:0;
    margin-right: 4%;
     
    position: fixed;
}
<div id="stickycart">
            <p id='order'>My Order</p>
            <p id='estimated'>Average Delivery <br>
                <b id='avg'><?php echo $avg_del ?></b><br> minutes</p> 
            <div id="prods_here">
                <!-- PLACE PRODUCTS HERE-->
<?php cart(); ?>  
            </div>
        </div>

Upvotes: 1

Views: 674

Answers (2)

Mr. Hugo
Mr. Hugo

Reputation: 12590

I cannot find consistency in your code because #stickycart is not present in your HTML. However, this is probably what you want: http://codepen.io/anon/pen/jqdYVd

Upvotes: 1

MajeStic
MajeStic

Reputation: 269

I'm going to suggest this, if you have the possibility to use the shopping cart as an absolute item:

https://jsfiddle.net/6trq2mg0/2/

CSS:

#cart {
  position: absolute;
  top: 350px;
  right: 0;
}

script:

$(window).on("scroll", function () {
    if ($(window).scrollTop() > 350) {
        $('#cart').css({"position" : "fixed", "top" : "0"});
    } else {
        $('#cart').css({"position" : "absolute", "top" : "350px"});
    }
});

Upvotes: 1

Related Questions