• Thursday , 27 July 2017

Magic Header Scroll Page Tutorial JavaScript CSS HTML

Code Canyon



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

3d Ocean

Related Posts

30 Comments

  1. Jacob Samuel G.
    June 24, 2017 at 02:01

    Muchas gracias! 😀

  2. Semir Zeynu
    June 24, 2017 at 02:01

    it's been 5 years or 7 years since I'm following you impressive work… but why not using brackets or other code editor with black screen… I feel it will be more fancy…. ☺?

  3. CHI SAMUEL
    June 24, 2017 at 02:01

    just beautiful
    thank you

  4. baileyneely
    June 24, 2017 at 02:01

    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.

  5. mubarak jamal
    June 24, 2017 at 02:01

    Heaven tutorial <3

  6. Mathew i
    June 24, 2017 at 02:01

    pagetop = document.getElementById('pagetop');
    menu = document.getElementById('menu');
    are in the header script but how js could get elements before the DOM loaded?

  7. sasoft
    June 24, 2017 at 02:01

    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

  8. Ahmed Hatem
    June 24, 2017 at 02:01

    Great Tutorial
    Thanks , Adam 🙂

  9. Geraspte schimmelkaas
    June 24, 2017 at 02:01

    Can i make my menu system my nav bar? And how?

  10. soussi mohamed
    June 24, 2017 at 02:01

    شكرا adam
    شروحات جميلة وسلسة.

  11. Simphiwe Tebe
    June 24, 2017 at 02:01

    I am becoming a better UI/UX designer because of you. Thank you so much, never stop making these. pleeease!!

  12. Nevergrim
    June 24, 2017 at 02:01

    maaan you are mu idol

  13. Kai Chen
    June 24, 2017 at 02:01

    Pretty damn good explanation. Does this work properly on mobile?

  14. LendGaming
    June 24, 2017 at 02:01

    .

  15. Reflect Advertising
    June 24, 2017 at 02:01

    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>

  16. John Neil Parong
    June 24, 2017 at 02:01

    you just made me subscribed sir.

  17. Iam Shaz
    June 24, 2017 at 02:01

    I love your videos! Everything is always so well explained and really helps me understand what's going on. Thanks a bunch 🙂

  18. Felix Cagro
    June 24, 2017 at 02:01

    sir I copied your code but its not working.
    only the design but the animation of the javascript was not working.

    colapse

  19. White Honkey
    June 24, 2017 at 02:01

    Adam,
    Thanks, I am going to try to modify this and use it to have my nav/menu bar pop onto the screen with a 1 second delay after the site is opened. Thanks again

  20. Dukjam Gya
    June 24, 2017 at 02:01

    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!

  21. Shubham Agrawal
    June 24, 2017 at 02:01

    nice video thanks
    how to change size of an image inside the header ?

  22. ayomide gabriel
    June 24, 2017 at 02:01

    God Bless YOu

  23. Sagar Acharya
    June 24, 2017 at 02:01

    nice video Adam

  24. Yoshi Xberg
    June 24, 2017 at 02:01

    Nice tutorial….and…
    I'm not gay, but your voice is amazing!

  25. Tanoj Sai
    June 24, 2017 at 02:01

    hi Adam did u know android programming if u please post the android app programs….

  26. André Silva
    June 24, 2017 at 02:01

    Hi there, can you help me adapting the code ? Please see here: https://jsfiddle.net/AndreScala/krcrba53/

    I'm trying to colapse the image instead your menu system. The ideia is have the menu stucked and when scroll the image collapse and disappear (shrink like the header and next disappear like your menu). Can you help me with my code ? Many thanks

  27. MrFallenSkillz
    June 24, 2017 at 02:01

    Adam, you always have good sh!t man. Thanks again.

  28. Jairo Paulino
    June 24, 2017 at 02:01

    Excellent vid! Thank you for posting it

  29. Saifuddin Makati
    June 24, 2017 at 02:01

    can you tell me how to become a genius like you

  30. Maurice Jones
    June 24, 2017 at 02:01

    How do you put a drop down menu in the menu area?

Leave A Comment

You must be logged in to post a comment.