jQuery and Javascript: offset.top() not responsive

Question

Is there a way to make offset.top() responsive? If not, how could I make the animated div on scroll responsive when it touches the top of the browser?

In my fiddle, when you scroll down, the div correctly goes to the top but if you scrunch the screen heightwise, it doesn't act as intended anymore.
From my understanding, this is because the variable that the div is stored is being called once, but when I bind it to the scroll event, the div doesn't work as intended.

fiddle: https://jsfiddle.net/jzhang172/j2yrumyg/8/

$(function(){

var cheese= $('.ok').offset().top; //Define top of 'hey'

//
//Animates when it reaches red part of page
//
$(window).scroll(function() {
    if ( $(window).scrollTop() >= cheese  ) {
  
        $('.ok').addClass('top');

        $('.nice').hide().fadeIn().html('ok');
            $(".nice").animate({ 
            left:"0"
        }, 600);
        $('.nice').addClass('maybe');

    }
    else{
                $('.ok').removeClass('top');
                $('.nice').removeClass('maybe');
                $('.nice').html('Hey');


    }
});

//
//This part doesn't rely on scroll event and is in charge of changing hover on ".ok" div.
//

      $('.ok').hover(function(){
         if(!$(this).hasClass("top"))
           $(this).addClass('proj-hover');
         
              },function(){
                $(this).removeClass('proj-hover');
               
              });


//
//Animate on click
//
$('.ok').click(function(){
    if ( $(window).scrollTop() >= cheese  ) {

}
else{
    $("body, html").animate({ 
            scrollTop: $('.other').offset().top 
        }, 600);
     
}
});








});

*{
  box-sizing:border-box;
}
body,html{
  padding:0;
  margin:0;
}
.div{
  height:100vh;
  width:100%;
  background:#6464FF;
}
.other{
  height:1000px;
  width:100%;
  background:#FF6161;
}
.ok{
  position:absolute;
  bottom:0;
  left:50%;
  margin-left:-100px;
  width:200px;
  height:50px;
  line-height:50px;
  background:black;
  color:white;
  text-align:center;
  transition:1s;
}

.top{
  position:fixed;
  top:0;
  left:0;
  transition:.7s;
      margin-left: 0px;
      width:100%;

}
.proj-hover{
  background:white;
  color:black;
}
.blue{
  background:blue;
}
.nice{
  transition:0s;
    margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
  
  <div class="ok">
  <p class="nice">Hey</p>
  </div>
</div>
<div class="other">
  
</div>

klauskpm · Accepted Answer · 2016-04-04 23:14:28Z

2

Your code just gets the .top() from element .ok at the begin. For it to work, you also should use something that won't change it's location, as the .other element.

Updated your code just here:

$(window).scroll(function() {
    var cheese= $('.other').offset().top; //Define top of 'hey'
    if ( $(window).scrollTop() >= cheese  ) {
        ...
    }
});

Update
But if you want to get the position based on the element .ok, you will need to create a placeholder element for it.

HTML

<div class="div">
  <div class="placeholder">
    <div class="ok">
      <p class="nice">Hey</p>
    </div>
  </div>
</div>
<div class="other"></div>

CSS

.ok,
.placeholder{
  position:absolute;
  bottom:0;
  left:50%;
  margin-left:-100px;
  width:200px;
  height:50px;
  line-height:50px;
  background:black;
  color:white;
  text-align:center;
  transition:1s;
}

JS

$(window).scroll(function() {
    var cheese= $('.placeholder').offset().top; //Define top of 'hey'
    if ( $(window).scrollTop() >= cheese  ) {
        ...
    }
});

Fiddle with result

edited Apr 4, 2016 at 23:14

answered Apr 4, 2016 at 22:47

klauskpm

3,1652 gold badges20 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Snorlax Over a year ago

Thanks that worked but was hoping for a more dynamic approach, imagine if both the blue div and red div were 100vh, then this approach would not work unfortunately.

klauskpm Over a year ago

With both setted to 100vh it works, as $(window).scrollTop() will be equal to cheese. This animation should be triggered when it reaches the desired height. What scenario are you looking for to achieve? Fiddle with both been 100vh

Snorlax Over a year ago

Ah, I see, that's pretty good but what if you really wanted to get the top of that div just out of curiosity?

klauskpm Over a year ago

Ok. Now I get what you mean. I will update my answer now.

Collectives™ on Stack Overflow

jQuery and Javascript: offset.top() not responsive

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related