How to make a .fixed sticky item's “margin-top” relative to the size of the sticky item?

StackOverflow https://stackoverflow.com//questions/22056384

Domanda

This is my first question. I am having trouble with a image I am trying to stick when it reaches the top of the page after scrolling. Check out this jfiddle - it is not mine but comes close to representing my question

http://jsfiddle.net/vBy5w/

(I am aware that I can input a set "margin-top" to make this work but when the browser size changes then the image size will respond and will throw off the set margin.)

So far I have achieved this by using the code below to effect the Div Id = Picture1 in my html

<div id="picture1"><img src="img/empty-restaurant.png" alt="Why do your customers not come back?" style="max-width:100%;height:auto;"> </div>

When this picture "sticks" the test below the image will jump up, I fixed this by including the last line of the .js but by stating a fixed "margin-top" it means that there will be a jump if the margin size is not correct depending on browser size.

Is there a way to make this Margin variable or relative to the height of the "stick"-ed item? And if so how?

Thanks guys!

$(document).ready(function() {
    var s = $("#picture1");
    var pos = s.position();                    
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        //$("#header_left").html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos);
        if (windowpos >= pos.top) {
            s.addClass("stick");
        } else {
            s.removeClass("stick"); 
        }

This is the part that needs changing - the first "margin-top" needs to be relative to the size of the "stick"ed item

if (windowpos >= pos.top) { s.addClass("stick"); $("body").css("margin-top", 60);     } else { s.removeClass("stick"); $("body").css("margin-top", 0); }

    });
});
È stato utile?

Soluzione

As comments,

$("body").css("margin-top", s.height());

Gives a dynamic margin-top css value to the <body> based on the height on the element ( #picture1 ) that is being fixed during window.scroll

As an addition, you mention that the height may change on screen resize ( rwd )

So this may be good to add also ( to keep it in check )

$(window).resize(function() {
  var s = $("#picture1");
  if(s.hasClass("stick") {
    $("body").css("margin-top", s.height());
  }
});
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top