Sticky header

  • Hey guy,
    I can’t manage to make the header stick and that it will change color smoothly when I scroll down. I want to the header to be white but and the fonts will change to black.
    Thank you for the help!

    • This topic was modified 4 years, 5 months ago by Jan Dembowski.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • you need to add this css:

    
.header {
  padding: 10px 16px;
  background: #555;
  color: white;
  background-color:transparent;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  color:black;
  -webkit-transition:color 1s ease;
  -moz-transition:color 1s ease;
  -o-transition:color 1s ease;
  transition:color 1s ease;
}

.sticky + .content {
  padding-top: 120px;
}

</style>
</head>
<body>

<div class="header" id="myHeader"> //this is your header so you should shange the <h2>Home</h2> to an <a hrf="... according to what your header has
  <h2>Home</h2>
</div>

    And this js:

    <script>
window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}
$(document).ready(function () {
    $("nav a").mouseenter(function () {
        if ($(this).data('fading')) //EXIT IF WE ARE FADING
        return;
        $('div', this).stop(true, false).animate({
            'height': '45px'
        }, 100);
        $('li', this).addClass('white_color'); // THIS IS THE LINE I'M AFTER - I want the color to change smoothly, not instantly
        $('li', this).stop(true, false).animate({
            'padding-top': '15px'
        }, 200);
    }).mouseleave(function () {
        if ($(this).data('fading')) return;
        $('li', this).removeClass('white_color');
        $('div', this).stop(true, false).animate({
            'height': '0px'
        }, 300);

        $('li', this).stop(true, false).animate({
            'padding-top': '65px'
        }, 500);
    });

});
</script>
    Thread Starter socialprofitil

    (@socialprofitil)

    Hi, thank you for your help!
    Unfortunately it doesn’t work.
    This is the error I receive: https://www.imageupload.net/image/cHDAr
    Which means that I can’t save because of an error

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Sticky header’ is closed to new replies.