How can I make a div stick to the top of the screen once it s been scrolled to

0 votes
I would like to create a div, that is situated beneath a block of content but that once the page has been scrolled enough to contact its top boundary, becomes fixed in place and scrolls with the page.
Sep 4, 2020 in Java-Script by kartik
• 37,490 points
46 views

1 answer to this question.

0 votes

Hello @kartik,

Using javascript:

var initTopPosition= $('#myElementToStick').offset().top;   
$(window).scroll(function(){
    if($(window).scrollTop() > initTopPosition)
        $('#myElementToStick').css({'position':'fixed','top':'0px'});
    else
        $('#myElementToStick').css({'position':'absolute','top':initTopPosition+'px'});
});

Your #myElementToStick should start with position:absolute CSS property.

Hope it helps!!
Thank you!!

answered Sep 4, 2020 by Niroj
• 82,540 points

Related Questions In Java-Script

0 votes
1 answer

How can I update NodeJS and NPM to the next versions?

Hello @kartik, First check your NPM version npm -v 1).Update ...READ MORE

answered May 5, 2020 in Java-Script by Niroj
• 82,540 points
112 views
0 votes
1 answer

How to implement useEffect() so the list on the front page updates only when a name change has been detected?

Hello @kartik, Instead of passing the entire object ...READ MORE

answered Jun 1, 2020 in Java-Script by Niroj
• 82,540 points
109 views
0 votes
1 answer

How to list the properties of a JavaScript object?

Hii @kartik, Use Reflect.ownKeys(): var obj = {a: 1, b: ...READ MORE

answered Jun 8, 2020 in Java-Script by Niroj
• 82,540 points
130 views
0 votes
1 answer

How can I allow django admin to set a field to NULL?

Hello @kartik, Try to overwrite the save() method ...READ MORE

answered Jun 12, 2020 in Java-Script by Niroj
• 82,540 points
779 views
+1 vote
1 answer

How to make anchor tag with routing using Laravel?

Hey @kartik, First you have to go to ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,540 points
4,775 views
0 votes
1 answer

What is redirection in Laravel?

Named route is used to give specific ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,540 points
538 views
0 votes
1 answer

How to install Laravel via composer?

Hello, This is simple you just need to ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,540 points
406 views
+1 vote
1 answer

What are named routes in Laravel and How can specify route names for controller actions?

Hey @kartik, Named routing is another amazing feature of ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,540 points
5,394 views
0 votes
1 answer

How to Scroll to the top of the page using JavaScript?

Hii @kartik, Using javascript <script> $("a[href='#top']").click(function() { ...READ MORE

answered Apr 2, 2020 in Java-Script by Niroj
• 82,540 points
99 views
0 votes
1 answer

How can I send a message to a particular client with socket.io?

Hii, You can try the code below: io.to(socket.id).emit("event", data); whenever ...READ MORE

answered Apr 27, 2020 in Java-Script by Niroj
• 82,540 points
8,022 views