CODEWITHSUNDEEP
jqueryhtmlcss
jerneva
jerneva

Reputation: 465

Fixed Shopping Cart, moves on scroll but does not stick to the top of page

I have two small problems with my sticky shopping cart:

  1. It will not stick to the top of the page.
  2. It will not float right.

I have a fixed shopping cart that works perfectly, my problem is the shopping cart is placed a while down the page on page load, lets say 200px for this example, the moment i scroll down the page, the shopping cart scrolls with me but has 200px spacing above it, instead of sticking to the top of the page.

The cart will not float right, no matter what i try.

Any suggestions on how i would resolve this:

   $(window).on("scroll", function() {
            if($(window).scrollTop() > 50) {
                $("#cart").css("top","right",$(window).scrollTop());
              
            }
        });
#cart{
    width: 25%;
    float:right;
    margin: 20px;
    margin-top:10%;;
    float:right;
     
    position: fixed;
}
       <div id="cart">
            <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: 0

Views: 2455

Answers (2)

cameck
cameck

Reputation: 2098

You are using position: fixed; so you have to specify your position in relation to the browser window. So, if you want to float it right, you'd have to do something like:

position: fixed;
top: 0;
right: 0;

As far as the top margin, you are writing, margin-top: 10%; which is creating the margin, make it 0 if you don't want it there

Upvotes: 1

SRudolf
SRudolf

Reputation: 27

Edit: You need to only assign position: fixed after a you pass the desired scrolltop, it should not be position fixed before.

Also, you can't float a fixed element. Instead, use right: 0; top: 0; position: fixed; when you want to stick it to the top right. If you need the children to float you can apply float to all the children.

Upvotes: 2

Related Questions