CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Snorlax
Snorlax

Reputation: 4765

jQuery and Javascript: offset.top() not responsive

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>

Upvotes: 1

Views: 1569

Answers (1)

klauskpm
klauskpm

Reputation: 3155

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

Upvotes: 2

Related Questions