Sticky Header Smoothing Scroll Down

Smooth scroll header with fixed position

You can use @keyframes to add some transition effects to the scroll.

$(window).scroll(function() {  var sticky = $('.mobile-menu'),    scroll = $(window).scrollTop();     if (scroll >= 40) {     sticky.addClass('fixed'); }  else {    sticky.removeClass('fixed');
}});

header {  padding: 20px 40px;  background: gray;  width: 100%;    -webkit-transition: all 0.5s ease;  -moz-transition: position 10s;  -ms-transition: position 10s;  -o-transition: position 10s;  transition: all 0.5s ease;}section {  height: 150vh;}

.fixed {  position: fixed;  top: 0;  left: 0;  animation: smoothScroll 1s forwards;}@keyframes smoothScroll { 0% {  transform: translateY(-40px); } 100% {  transform: translateY(0px); }}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><header class="mobile-menu">Text here</header><section>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake  gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</section>

My Sticky Header Cover Content with the Smooth Scrolling Effect

I have added a sandbox how to do it using jQuery, generally speaking only one addition from my site is that I am checking what is the target e.g. scroll to top page, and if yes, I am running specified code for it:

if (targetHref === "#") {
  $("html, body").animate(
    { scrollTop: 0 },
    "1000"
  );
} else {
  $("html, body").animate({scrollTop: $(targetHref).offset().top},1000);
}

codesandbox.io/s/81l87w26w0

Subtract header height scroll to prevent covering content by header

scrollTop: $(targetHref).offset().top - 180"

account for fixed header with smooth scroll

You need to accomodate for the height of the fixed header by subtracting it from the position you are moving the view to.

$('html, body').animate({
  scrollTop: target.offset().top - fixedHeader.outerHeight()
}, 1000);

Just replace "fixedHeader" with whatever element you are using for fixed header.

JQuery Smooth Scroll to Anchor with Sticky Navigation Bar

As it was suggested before, Microsoft Edge does not appear to properly support the .hash feature without causing some ill effects such as the rebounding of the smooth scroll feature. In order to work around this, I decided to use pushState for browsers that supported it, which achieved the desired effect.

HTML

<!DOCTYPE HTML>
<html lang="en">
<head></head>
<body id="home">
    <nav><a href="#section1">Section #1</a></nav>
    <main>
        <!-- INSERT A BUNCH OF <BR> TAGS -->
        <h2 id="section1">section1</h2>
        <!-- INSERT A BUNCH OF <BR> TAGS -->
    </main>
</body>
</html>

CSS

nav {
    position: fixed;
    padding: 4px;
    border: 2px solid #000;
    width: 100%;
    line-height: 2.25em;
    background-color: yellow;
}

h2 {
    padding: 4px;
    border: 1px solid #000;
    width: 100%;
    line-height: 100px;
    background-color: red;
}

JAVASCRIPT

$('a[href*="#"]').click(function(event) {

    var href = $(this.hash);

    if (href.length) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: href.offset().top - 100
        }, 750, function() {
            if (history.pushState) {
                history.pushState(null, null, 'index.html#' + href.attr('id'));
            } else {
                location.hash = href.attr('id');
            }
        });     
    }
});

I was not able to figure out how to dynamically pull the calling file name, for example index.html or main.html to dynamically generate the hashed URL so that will have to be updated per page. Otherwise, this works exactly how I had expected. Please see the JSFiddle implementation for a working example.

Anchor links going on top of the page behind sticky header. How to set smooth scroll JS to always keep a 75px top margin when scrolling?

Untested but try something like

scrollTop: target.offset().top+70

The scroll top is stopping at the top of the page. You need to add onto the offset to move it down.

Full Code

<!-- SMOOTH SCROLL -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top+70
        }, 1000);
        return false;
      }
    }
  });
});
</script>
<!-- End of SMOOTH SCROLL -->