CODEWITHSUNDEEP
javascriptjquerycss
Eddy
Eddy

Reputation: 566

add attribute when bottom of div scrolls above bottom of browser window

I would like to have an attribute added to a certain div (id="text1") when an other div (id="one") scrolls above the bottom of the browser window. When the bottom of "one" scrolls below the bottom edge of the browser window again the attribute should be removed again.

This is the attribute I would like added and removed:

data-scroll-speed="2"

See example here

Upvotes: 1

Views: 65

Answers (1)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

1st: you need to include jquery

2nd: you need to use window scroll event

3rd: you need to get the #two .offset().top and outerHeight()

see the demo

$(document).ready(function(){
  $(window).on('scroll' , function(){
    var WindowScrollTop = $(this).scrollTop(),
        Div_one_top = $('#one').offset().top,
        Div_one_height = $('#one').outerHeight(true),
        Window_height = $(this).outerHeight(true);
    if(WindowScrollTop >= (Div_one_top +  Div_one_height) - WindowScrollTop){
       $('#one').css('background' , 'red');
       $('#text1').removeAttr('data-scroll-speed');
    }else{
       $('#one').css('background' , 'black');
       $('#text1').attr('data-scroll-speed', '2');
    }
  }).scroll();
});
#one {
    height: 120vw;
    width: 100%;
    top: 0px;
    background-color: pink;
}

#text1 {
    width: 100%;
    font-size: 9em;
    margin-top: 100vw;
    position: absolute;
	  color:white;
}

#two {
    height: 50vw;
    width: 100%;
    top: 0px;
    background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one">
    <div id="text1">
        this is my text
    </div>
</div>
<div id="two">

</div>

Upvotes: 1

Related Questions