D4mations.com

Magic Header Scroll Page Tutorial JavaScript CSS HTML



Lesson Code: http://www.developphp.com/video/JavaScript/Magic-Header-Scroll-Page-Tutorial
Learn to program a header that magically changes as the user scrolls down the page. When the user scrolls back to the top of the page we will make the header change back to its original display settings.

Original source

d4mer

, , , , , , , , , , , , , , , , , , , , ,

30 responses to “Magic Header Scroll Page Tutorial JavaScript CSS HTML”

  4. I'm having a little problem — can someone help me out? This tutorial was exactly what I needed and I was able to great my desired effect no problem on Codepen but when I copied the code onto my website, it's not doing as it's supposed to. It's displaying a basic serif font and my links are back to a regular list instead of style. I'm not sure what I did.

  7. great work adam, one thing i really mention that write document.getelementbyid from outside of the function will improve the performance. because on every call it will iterate over the dom to find that element

  15. Hello Adam i copied your code but it is not working

    <script>
    var pagetop, menu yPos;
    function yScroll() {
    pagetop = document.getElementById('pagetop');
    menu = document.getElementById('menu');
    yPos = window.pageYOffset;
    if(yPos > 150){
    pagetop.style.height = "36px";
    pagetop.style.paddingTop = "8px";
    menu.style.heigh = "0px";
    }
    else{
    pagetop.style.height = "120px";
    pagetop.style.paddingTop = "50px";
    menu.style.heigh = "50px";}
    }
    window.addEventListener("scroll", yScroll);
    </script>

  20. hey adam, i am doing something similar for my navbar for changing its background color when i scroll the page down.but its not working. i have used this code. [
    <script>
    var pagetop, yPos;
    function scrollY(){
    pagetop = document.getElementsByClassName('nav-cont');
    yPos = window.pageYOffset;
    if(yPos > 90){
    pagetop.style.background = "white";

    } else {
    pagetop.style.background = "orange";

    }
    }
    window.addEventListener("scroll", scrollY);
    </script>

    ]

    plzzz help me!

Leave a Reply