Make an item stick after a certain point

JavaScript
1

I know you can use position: fixed; to fix header,s but what if i am scrolling down a page and want something to stick after i reach it?

My codepen --> https://codepen.io/Mike-was-here123/pen/MqJZdb

(line 28 CSS, 14 HTML is the nav bar).

I want to know how i can make the navigation bar stick (not the header) and have it go down with the user. position: fixed; just messed up everything when i apply it.

2

This video has exactly what you need and it is very well explained
Stick nav on scroll

2 Likes
3

I tried his code:

$("doucment").ready(function() {
  const nav = document.querySelector("#nav");
  const topOfNav = nav.OffsetTop;
  let fixNav = () => {
    console.log(topOfNav);
  };
  window.addEventListener("scroll", fixNav());
});

And i just get undefined. I target my Nav bar with id #nav

4

You have misspelled ā€œdoucmentā€ in the first line

5

Even then i just get ā€˜undefinedā€™

6

Update: i used W3 schoolā€™s method --> https://www.w3schools.com/howto/howto_js_navbar_sticky.asp

I was able to get it to work, but my only error is that when I apply the position: fixed; it messes everything up -->

LIne 14 HTML
Line 30 CSS
LINe 19 J.S.
ā€“> https://codepen.io/Mike-was-here123/pen/MqJZdb
You can see its ability to detect and apply the fixed position , but it also messed it up since im using flex box (line 9 CSS, line 13 HTML)

7

Why not use?

.sticky {
position: sticky;
top: 0;
width: 100%;
}

1 Like
8

Everything is OK.

You have to grab the width of nav and adding this as the margin-left on gui container.

Here is the tested code.

// Get the offset position of the navbar
var sticky = navbar.offsetTop;
const navWidth = $('.nav').width(); 

// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky"); 
    
     $('.gui').css('margin-left',   navWidth + 20 + 10 + 'px');

     // 20 to compensate right margin on nav itself
     // 10 to compensate left margin on gui 

  } else {
    navbar.classList.remove("sticky");
    $('.gui').css('margin-left','10px');
  }
}
1 Like
9

@Rohitkrops @steven_kuipers

Thanks to you both for you responses. I did choose Stevenā€™s sinceit was less code, but thank you for taking time to respond.

Both solutions are helpful.

10

@steven_kuipers

Hey, iā€™m wondering how can i do with multiple elements but those two elements+ are on different locations on the page?

11

Hi ,

sorry for the late reply.
I think the short answer is that you can apply the same styles to these elements.
What you have to think about with position: sticky is that there should be enough available space below the object that you want stay in place. Else it will be pushed away immediately.

I have a demo for a sticky items here: https://codepen.io/stevenkuipers/pen/bxrRvp/
There is a class called info-box for the icons on the right and have set these to sticky. They are in a class called aside. The height of the elements with class aside can vary depending on the size of the text in the article next to it. If you give the aside class a border and a color you can see that there is a lot of room for the item inside to move until it gets pushed away by the new elements below.

I hope this helps,

cheers Steven

12

Thanks for the reply.

I didnā€™t know it was this simple to use sticky. I never came across it in any of my research. Your information is very useful.

thanks