0

To avoid confusion and before you read on, this is NOT "how many pixels down" but at, for example, <section id="smaller"> then it would add a class. I'm new to javascript so please take that with a grain of salt. Thanks.

I'm trying to change the header by adding a new attribute class to the header file. Following code works ok on desktop when your width never changes but what if your on a phone and your design is responsive? Yes, this is exactly why I need your help. I tried so many thing already and don't know how to get this setup like I want. I am new to web dev and this is one of my first few websites.

My code right now:

function init() {
    window.addEventListener('scroll', function (e) {
        var distanceY = window.pageYOffset || document.documentElement.scrollTop, header = document.querySelector("header");
        if (distanceY > 606) {
            header.setAttribute("class", "smaller");
        } else {
            header.removeAttribute("class");
        }
    });
 }
window.onload = init();

Couple of things I need to clear up, and/or if you're a little confused:

  • the header is the actual <header> not a div with a header class or id.
  • like I said, this does work right now but is only useful for a fixed width for every screen size
  • I'm including this code on a js file which is linked just before the ending of the <body> tag.
  • "606" being the length down the page in pixels when the change happens

Is there a way to add an attribute to the header when you reach a certain place on the web page? If anyway could give me some guidance, that would be great. Thanks a bunch for reading this and enjoy the rest of your day. :)

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
hermitspike
  • 3
  • 2

2 Answers2

0

Use element.getBoundingClientRect() to retrieve screen position information of your object. This will give you an object containing bottom, height, left, etc., for your task you might want to use top and height. In combination with window.innerHeight you can code what you want.

window.addEventListener('scroll', function() {
    var r = header.getBoundingClientRect();
    if (r.top < 300)
        header.setAttribute("class", "smaller");
    else
        header.removeAttribute("class");
});

However, there are probably better ways to do this, have a look at "css media queries", they offer almost anything you might require to make your pages responsive.

ZPiDER
  • 4,264
  • 1
  • 17
  • 17
  • Would it be too much to ask for an implementation? :P Sorry, kinda overwhelmed right now. It would be much appreciated. Thanks! – hermitspike Apr 04 '16 at 10:33
  • i added some example implementation, i dont know exactly what you are going for, but this code adds a class to an element that was going above 300px on the screen. TIP: have a look at jQuery when you are new to JS, it will help a lot with doing things elegantly. – ZPiDER Apr 04 '16 at 10:37
  • The other answer posted by @caramba helped me with the explaining my goal = if you first check where a element is on a page and set that to `distanceY`, they you can still use the rest of the code. This is a way of doing it however it should help you understand... hopefully. Thanks for your answer, I'll look into it and try it out. – hermitspike Apr 04 '16 at 10:57
  • I've added a working solution to the post. Thanks for your time! – hermitspike Apr 04 '16 at 11:29
0

I have figured out a way to do it with .position();. Here's my explanation:

#sub-services is the element I want to get the position of.

el is the position of the #sub-services.

And smaller is a class added to the <header>.

Here's the full code which I'm using in my site:

var el = $( "#sub-services" );
var position = el.position();

function init() {
    window.addEventListener('scroll', function (e) {
        var distanceY = window.pageYOffset || document.documentElement.scrollTop, header = document.querySelector("header");
        if (distanceY > position.top) {
            header.setAttribute("class", "smaller");
        } else {
            header.removeAttribute("class");
        }
    });
}
window.onload = init();

It is much easier to do it with jquery. Thanks to @caramba for pointing me in the right direction.

hermitspike
  • 3
  • 2