CODEWITHSUNDEEP
javascriptjquerycsshtml
user1412665
user1412665

Reputation: 31

Is there a way to change my <header> style when the page reaches certain #anchor point?

I have a question to ask and hopefully get an answer. I am making a one-page portfolio site with four #anchor points "pages". The divs have 100% heights so they fill the whole browser height. My header (logo and navigation) has a fixed position. I would like to change the style of my header (my logo and link color) when the user clicks the link or scrolls to the third and fourth #anchor point. Could someone help me with this issue because I cannot figure it out?

Upvotes: 2

Views: 185

Answers (2)

laymanje
laymanje

Reputation: 833

This will check the height position of the div on the page relative to the div that you are targeting on scroll. This is what I believe you are looking for. 

$(function(){



$(window).scroll(function(){
    if($('#targetDiv').offset().top >= window.scrollX ){

    }


  })
})

Upvotes: 1

janfoeh
janfoeh

Reputation: 10328

jQuery Waypoints might be an easy way to achieve this. It allows you to trigger any kind of action when the user scrolls past certain points on your page.

Upvotes: 3

Related Questions