CODEWITHSUNDEEP
javascripthtmlcss
auto
auto

Reputation: 1153

Image resizes when position is changed to fixed on scroll

I would like an image to become fixed where it is once it appears on screen during a scroll, but become unfixed if the user scrolls back up.

However, when I use a JS on scroll function to change the image position to fixed, it suddenly "jumps"/resizes, and I'm not sure why. My fix was to create variables that alter the width and left values of the image after it becomes fixed, but I want to do this will multiple images on a page and each one seems to require a different width and left adjustment. I'm not sure what is conceptually causing this issue. Simply resetting the width and left to their original values does not work. Does a fixed position resize and image.

Here is a jsfiddle of the issue. And here is the code. JS:

 var sitckyImageWidth = "38.4%";
  var normalImageWidth = "48%";


document.addEventListener("scroll", function(){

  var windowTop = $(window).scrollTop();
  var  windowWidth = window.innerWidth;
  var  windowHeight = window.innerHeight;

   //loop through each div and grab top/bottom/midpoint info and find id
   $('.articles').each(function(i){
     var top = $(this).offset().top;
     var bottom = top+ $(this).height();
     var midPoint = (bottom+top)/2;
     var thisId = this.id;
     var newId;

    //use container div info to find media info
     var newId = thisId+"Media";
     var sectionImage=document.getElementById(newId);
     var sectionImageTop = $(sectionImage).offset().top;

      //if article is on the page, change position to fixed and set top position
     if (top<=windowTop&&bottom>windowTop){

       $(sectionImage).css("top","10px")
       $(sectionImage).css("position","fixed")
       //$(sectionImage).css("width",sitckyImageWidth)
     }
      //if container is not at top of the page, return to relative
     if (bottom<=windowTop||(bottom>windowTop&&top>windowTop)){
       $(sectionImage).css("position","relative")
     }
   })
}); //end scroll

Upvotes: 1

Views: 440

Answers (2)

ChrisM
ChrisM

Reputation: 1672

Position fixed means that an element will have relative sizes and positioning in relation to the viewport, not their parent elements.

Specifically what is happening here is that your div with ID article1Media is set to have a width of 48%. When it has the CSS property of position: relative then that resolves as 48% of the width of it's containing element (the div with id article1) however when it is position fixed that resolves as 48% of the width of the viewport. Since there is an implicit 8px margin on the <body> element then these are different.

There are a few different solutions to this, and how you tackle it depends on how you want to build your site.

Example fix 1

A simple fix for your immediate example is to simply add the following CSS.

body{
    margin:0px;
}

.image{
    margin:8px;
}

https://jsfiddle.net/Chipmo/k56qkk5b/13/

This moves the implicit margin onto the image element. Of course you can set it to whatever you like, or omit it entirely.

Look into CSS resets for more information about overriding implicit default styles, though be warned that it is possible to cause problems with overzealous reset codes.

( Edit: To be clear the above code is definitely not a drop in code for this problem everywhere. It will only work on quite simple HTML pages like your jsFiddle. )

Example fix 2

Another technique you could consider is locking the width and height to it's initial values using jQuery .width() and .height() functions. This would be inflexible, and you would have to do extra work to make it responsive (for mobile etc), but could be appropriate in some circumstances.

Example fix 3

A more portable solution might be to eschew relative sizing in favour of fixed widths and then use CSS media queries for reponsivity. Something like this:

.image{
    width:500px;
}

@media(min-width:800px){
    width:300px;
}

Example fix 4

If you wish to preserve the 'fluid' nature of using percentages I would suggest looking into using calc along with an offset that gets applied when the position is fixed (so, you add a class when you make the image fixed) that adjusts the sizing appropriately.

.media.image-fixed{
  position:fixed;
  width:calc(48% - 8px);
}

See this example https://jsfiddle.net/Chipmo/6mu2Lt9g/2/

Upvotes: 1

Venkatesh Chitluri
Venkatesh Chitluri

Reputation: 134

Above behavior is observed since because of applying the position property not because of the scroll.Please take a look at the following link Position Properties
Position Fixed : Fixed position elements relative to document not on any parent container.Hence occupies the complete width available. Position Relative: Relative positioned elements behaves relative to hosted containers.And inner elements consumes the hosted parent width.

Upvotes: 0

Related Questions