[Tips & Scripts] Creating a Fixed Header/Footer (aka Sticky Header)

navigation
ui
design

#103

Hey @Vipin_Maurya drop this into the page Scripts (before body end tag) and you’ll be scrolling smooth :wink:

<script>
  lp.jQuery(function($) {

// The speed of the scroll in milliseconds
var speed = 1000;

// Find links that are #anchors and scroll to them
$('a[href^=#]')
  .not('.lp-pom-form .lp-pom-button')
  .unbind('click.smoothScroll')
  .bind('click.smoothScroll', function(event) {
    event.preventDefault();
    $('html, body').animate({ scrollTop: $( $(this).attr('href') ).offset().top }, speed);
  });
  });
</script>

#104

I am attempting to use this snippet to keep the header of my page fixed at the top, but I am encountering some problems that I’m hoping someone can help me with.

I follow the above instructions and create the JS and change the box# the 1 place it needs to be changed. However when I do that it messes up the entire header and moves copy as well as the header. Below is the JS that i’ve uploaded

!


#105

Hi,

we already implemented the sticky header a few weeks/months back and we didn’t notice any issues. But only recently we figured out that there is an issue on small screens which are less wide than our page properties.

Users are only able to scroll to the right on the page, but not within the header and therefore can’t see all the elements. Please take a look at the youtube video. The page for reference ist Prüfplaner

Did anyone experience the same issues? How did you solve it?

Thank you


#106

#107

#108

I am trying to make a sticky footer on mobile and a sticky header on desktop with the same template. I got the footer for mobile working, but for desktop, i am specifying the header to stick, but it’s making my box stick to the bottom of the page instead.

Any ideas?

I created two javascripts (one for the footer, one for the header)

STICKY FOOTER

STICKY HEADER


#109

Hi,

I am trying to make my header sticky and also have the button scroll to a section on the landing page but I’m unable to do it - can you please help?

Thanks!


#110

Hey @alyssawee can you share the page URL? :slight_smile: