Keeping a scalable picture underneath a fixed position nav

JavaScript
21

Yeah the offset would need to account for the sticky navs height. Probably should move this thread to the Javascript section. I’ll do that now.

22

Thanks a lot guys, can you link the new thread when it’s there?

23

This is the thread :slight_smile: .

24

Ooh nice lol

25

This is driving me crazy, I havnt been able to find something this specific on other forums

26

At the end of your smoothscroll script try supplying an offset.

e.g.

// Initialize all .smoothScroll links
jQuery(function($) {
    $.localScroll({
        filter: '.smoothScroll',
	offset: -55
    });
});
27

Thanks for this, it works but, as you change the viewport size, it keeps it at a fixed pixel unit, making the offset too large on smaller screens. Im gonna try using percentage instead

28

Cant seem to ge that to work, new to js though

29

I think what needs to happen is have the script get the dimensions of the nav bar and add an offset of that dimension, how could I do that?

Thanks

30

It won’t be as straight forward as that because the routine will need to be tied to the resize event if the height of the nav is changing with the window size. That will require more complicated code than just supplying an offset and is beyond my skills. Maybe someone like @James_Hibbard (or others) can help.

31

I am okay with the page needing to be reloaded once the window size is changed for the script to work though

32

Seems to be working for me (or could you tell me how to recreate the problem).

33

At smaller screen sizes the height of the header changes and thus the scroll offset no longer matches the header height and although it works there is a greater gap than needed.

The offset for the scroll would need to be supplied on resize so that the header height can be calculated at each width (without throttling the resize event) :smile:

34

I could only reproduce the problem in Firefox.
On this site Chrome refuses to let me resize it below 386px.

Anyway, I was able to solve the problem for me by doing:

var offSet = ($(window).width() < 400)? 15 : -55
jQuery(function($) {
  $.localScroll({
      filter: '.smoothScroll',
      offset: offSet
  });
});

This involves refreshing the page when the browser is resized, but the OP said he didn’t mind that.

If a refresh is not desired, you can wrap everything up in a function and reinitialize it on resize. In this case, I would wrap all of that in a timeout, so that you only reinitialize when the user has finished scrolling.

35

Hey, thanks a lot, testing now

36

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.