CODEWITHSUNDEEP
javascriptjqueryhtmlcssscroll
domburford
domburford

Reputation: 99

Fix/stick image to top after scrolling - the image jumps to the top straight away?

I have an image in the center of my webpage. Once the user scrolls and the image hits the top of the window, I am attempting to fix the image to the top of the page so that it scrolls with the page.

However, instead of it sticking when it hits the top of the window, the image is currently jumping to the top of the page as soon as the user scrolls. Although I would like the image to stay fixed at the top while the user is on the page, it stays fixed when the page is refreshed!

Can't seem to figure this out - please help!

index.html 

<img src="./assets/img/logo.png" class="logo" alt="Logo">

style.css 

.logo {
   width: 500px;
   display: block;
   position: absolute;
   top: 200px;
   left: 0;
   right: 0;
   margin: auto;
}

main.js 

$(function() {
  var boxInitialTop = $('.logo').offset().top;
  $(window).scroll(function () {
    if ($(window).scrollTop() > boxInitialTop) {
      $('.logo').css({position: 'fixed', top: '0px'});
    } else {
      $('.logo').css({position: 'absolute'});
    }
  });
});

Upvotes: 2

Views: 2583

Answers (4)

Pete
Pete

Reputation: 58432

I think all you need to do is reset the initial top value when you scroll back down:

  var boxInitialTop = $('.logo').offset().top;
  $(window).scroll(function() {
    if ($(window).scrollTop() > boxInitialTop) {
      $('.logo').css({
        position: 'fixed',
        top: '0px'
      });
    } else {
      $('.logo').css({
        position: 'absolute',
        top: '200px'         // add this to "reset" the top to it's original (that you set in your css)
      });
    }
  });
body {height:2000px;}

#test {
  height: 400px;
  position: relative;
}

.logo {
  width: 500px;
  display: block;
  position: absolute;
  top: 200px;
  left: 0;
  right: 0;
  margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  <img src="http://lorempixel.com/400/200/city/" class="logo" alt="Logo">
</div>

Upvotes: 3

user6292372
user6292372

Reputation: 238

your code works.

you only have to reset the top value in the else section. This way it stays 0px because it was set this way in the if section.

Upvotes: 2

Frits
Frits

Reputation: 7614

You need to put the original placement of the element back to where it started (after the else). Once the element returns to position:absolute you need to ensure that it's top property is returned back to 200px otherwise it will still hold the value that was set when it was fixed i.e. 0.

See below:

$(function() {
  var boxInitialTop = $('.logo').offset().top;
  $(window).scroll(function () {
    if ($(window).scrollTop() > boxInitialTop) {
      $('.logo').css({position: 'fixed', top: '0px'});
    } else {
      $('.logo').css({position: 'absolute', top : boxInitialTop+'px'});
    }
  });
});

Upvotes: 1

anas eddiani
anas eddiani

Reputation: 23

$ ( function ()  { 
  var boxInitialTop = $ ( '.logo' ). offset (). top ; 
  $ ( window ). scroll ( function  ()  { 
    if  ( $ ( window ). scrollTop ()  > boxInitialTop )  { 
      $ ( '.logo' ). css ({ position :  'relative' , top :  '0px' }); 
    }  else  { 
      $ ( '.logo' ). css ({ position :  'absolute' }); 
    } 
  }); 
});

Upvotes: 0

Related Questions