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,520 points
777 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,880 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,880 points
940 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,880 points
928 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,880 points
967 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,880 points
4,740 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,880 points
22,831 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,880 points
2,915 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,880 points
2,850 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,880 points
44,079 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,880 points
981 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,880 points
27,730 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP