jQuery | Keep top div element in view while window scrolling

up vote
1
down vote

favorite

I have a div element with class .b-widget and is present on the top of the page.
When I scroll down, the div goes away and when I scroll up it appears again.
I want it to stick to its place when i scroll down and resume when I scroll up.

I wrote below script but this is not helping either :

<script>

//keep element in view

(function($)

{

    $(document).ready( function()

    {

        var elementPosTop = $('.b-widget').position().top;

        $(window).scroll(function()

        {

            var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();

            //if top of element is in view

            if (wintop > elementPosTop)

            {

                //always in view

                $('.b-widget').css({ "position":"fixed", "top":"50px" });

            }

            else

            {

                //reset back to normal viewing

                $('.b-widget').css({ "position":"inherit" });

            }

        });

    });

})(jQuery);

</script>

javascript jquery

share|improve this question

asked yesterday

Ambika Tewari

1156

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  it's not exactly clear what is wrong with your code, just looks like you would have an extra 50px top when you reset it. I would use a class to make it fixed instead of using css directly on your element - that way you do not have to reset all your css back to normal, you can just remove the class that fixes it - see this jsfiddle.net/FyEGN/2
  – Pete
  yesterday
  
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  Or this would be closer to what you are after: jsfiddle.net/FyEGN/1515
  – Pete
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  why you do not fixed it for ever in css that take "position":"fixed", "top":"50px"
  – LDS
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @Pete else part is working but not if part. Her is the code I writtem :
  – Ambika Tewari
  18 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  <style> .fixed {position:fixed; top:0; left:0; z-index:2; width:100%;} </style> <script> $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $(".flight-filters.ow").css({ "display": "none", "opacity": "0" }).fadeOut("slow"); $('.b-widget > .container-fluid').addClass('fixed'); } else { $('.b-widget > .container-fluid').removeClass('fixed'); } }); </script>
  – Ambika Tewari
  18 hours ago
  

  
  
  
  

 | 
show 2 more comments

up vote
1
down vote

favorite

I have a div element with class .b-widget and is present on the top of the page.
When I scroll down, the div goes away and when I scroll up it appears again.
I want it to stick to its place when i scroll down and resume when I scroll up.

I wrote below script but this is not helping either :

<script>

//keep element in view

(function($)

{

    $(document).ready( function()

    {

        var elementPosTop = $('.b-widget').position().top;

        $(window).scroll(function()

        {

            var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();

            //if top of element is in view

            if (wintop > elementPosTop)

            {

                //always in view

                $('.b-widget').css({ "position":"fixed", "top":"50px" });

            }

            else

            {

                //reset back to normal viewing

                $('.b-widget').css({ "position":"inherit" });

            }

        });

    });

})(jQuery);

</script>

javascript jquery

share|improve this question

asked yesterday

Ambika Tewari

1156

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  it's not exactly clear what is wrong with your code, just looks like you would have an extra 50px top when you reset it. I would use a class to make it fixed instead of using css directly on your element - that way you do not have to reset all your css back to normal, you can just remove the class that fixes it - see this jsfiddle.net/FyEGN/2
  – Pete
  yesterday
  
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  Or this would be closer to what you are after: jsfiddle.net/FyEGN/1515
  – Pete
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  why you do not fixed it for ever in css that take "position":"fixed", "top":"50px"
  – LDS
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @Pete else part is working but not if part. Her is the code I writtem :
  – Ambika Tewari
  18 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  <style> .fixed {position:fixed; top:0; left:0; z-index:2; width:100%;} </style> <script> $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $(".flight-filters.ow").css({ "display": "none", "opacity": "0" }).fadeOut("slow"); $('.b-widget > .container-fluid').addClass('fixed'); } else { $('.b-widget > .container-fluid').removeClass('fixed'); } }); </script>
  – Ambika Tewari
  18 hours ago
  

  
  
  
  

 | 
show 2 more comments

up vote
1
down vote

favorite

up vote
1
down vote

favorite

I have a div element with class .b-widget and is present on the top of the page.
When I scroll down, the div goes away and when I scroll up it appears again.
I want it to stick to its place when i scroll down and resume when I scroll up.

I wrote below script but this is not helping either :

<script>

//keep element in view

(function($)

{

    $(document).ready( function()

    {

        var elementPosTop = $('.b-widget').position().top;

        $(window).scroll(function()

        {

            var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();

            //if top of element is in view

            if (wintop > elementPosTop)

            {

                //always in view

                $('.b-widget').css({ "position":"fixed", "top":"50px" });

            }

            else

            {

                //reset back to normal viewing

                $('.b-widget').css({ "position":"inherit" });

            }

        });

    });

})(jQuery);

</script>

javascript jquery

share|improve this question

asked yesterday

Ambika Tewari

1156

I have a div element with class .b-widget and is present on the top of the page.
When I scroll down, the div goes away and when I scroll up it appears again.
I want it to stick to its place when i scroll down and resume when I scroll up.

I wrote below script but this is not helping either :

<script>

//keep element in view

(function($)

{

    $(document).ready( function()

    {

        var elementPosTop = $('.b-widget').position().top;

        $(window).scroll(function()

        {

            var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();

            //if top of element is in view

            if (wintop > elementPosTop)

            {

                //always in view

                $('.b-widget').css({ "position":"fixed", "top":"50px" });

            }

            else

            {

                //reset back to normal viewing

                $('.b-widget').css({ "position":"inherit" });

            }

        });

    });

})(jQuery);

</script>

javascript jquery

javascript jquery

share|improve this question

asked yesterday

Ambika Tewari

1156

share|improve this question

asked yesterday

Ambika Tewari

1156

share|improve this question

share|improve this question

asked yesterday

Ambika Tewari

1156

asked yesterday

Ambika Tewari

1156

asked yesterday

Ambika Tewari

1156

1156

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  it's not exactly clear what is wrong with your code, just looks like you would have an extra 50px top when you reset it. I would use a class to make it fixed instead of using css directly on your element - that way you do not have to reset all your css back to normal, you can just remove the class that fixes it - see this jsfiddle.net/FyEGN/2
  – Pete
  yesterday
  
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  Or this would be closer to what you are after: jsfiddle.net/FyEGN/1515
  – Pete
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  why you do not fixed it for ever in css that take "position":"fixed", "top":"50px"
  – LDS
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @Pete else part is working but not if part. Her is the code I writtem :
  – Ambika Tewari
  18 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  <style> .fixed {position:fixed; top:0; left:0; z-index:2; width:100%;} </style> <script> $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $(".flight-filters.ow").css({ "display": "none", "opacity": "0" }).fadeOut("slow"); $('.b-widget > .container-fluid').addClass('fixed'); } else { $('.b-widget > .container-fluid').removeClass('fixed'); } }); </script>
  – Ambika Tewari
  18 hours ago
  

  
  
  
  

 | 
show 2 more comments

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  it's not exactly clear what is wrong with your code, just looks like you would have an extra 50px top when you reset it. I would use a class to make it fixed instead of using css directly on your element - that way you do not have to reset all your css back to normal, you can just remove the class that fixes it - see this jsfiddle.net/FyEGN/2
  – Pete
  yesterday
  
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  Or this would be closer to what you are after: jsfiddle.net/FyEGN/1515
  – Pete
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  why you do not fixed it for ever in css that take "position":"fixed", "top":"50px"
  – LDS
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @Pete else part is working but not if part. Her is the code I writtem :
  – Ambika Tewari
  18 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  <style> .fixed {position:fixed; top:0; left:0; z-index:2; width:100%;} </style> <script> $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $(".flight-filters.ow").css({ "display": "none", "opacity": "0" }).fadeOut("slow"); $('.b-widget > .container-fluid').addClass('fixed'); } else { $('.b-widget > .container-fluid').removeClass('fixed'); } }); </script>
  – Ambika Tewari
  18 hours ago
  

  
  
  
  

1

1

it's not exactly clear what is wrong with your code, just looks like you would have an extra 50px top when you reset it. I would use a class to make it fixed instead of using css directly on your element - that way you do not have to reset all your css back to normal, you can just remove the class that fixes it - see this jsfiddle.net/FyEGN/2
– Pete
yesterday

it's not exactly clear what is wrong with your code, just looks like you would have an extra 50px top when you reset it. I would use a class to make it fixed instead of using css directly on your element - that way you do not have to reset all your css back to normal, you can just remove the class that fixes it - see this jsfiddle.net/FyEGN/2
– Pete
yesterday

1

1

Or this would be closer to what you are after: jsfiddle.net/FyEGN/1515
– Pete
yesterday

Or this would be closer to what you are after: jsfiddle.net/FyEGN/1515
– Pete
yesterday

why you do not fixed it for ever in css that take "position":"fixed", "top":"50px"
– LDS
yesterday

why you do not fixed it for ever in css that take "position":"fixed", "top":"50px"
– LDS
yesterday

@Pete else part is working but not if part. Her is the code I writtem :
– Ambika Tewari
18 hours ago

@Pete else part is working but not if part. Her is the code I writtem :
– Ambika Tewari
18 hours ago

<style> .fixed {position:fixed; top:0; left:0; z-index:2; width:100%;} </style> <script> $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $(".flight-filters.ow").css({ "display": "none", "opacity": "0" }).fadeOut("slow"); $('.b-widget > .container-fluid').addClass('fixed'); } else { $('.b-widget > .container-fluid').removeClass('fixed'); } }); </script>
– Ambika Tewari
18 hours ago

<style> .fixed {position:fixed; top:0; left:0; z-index:2; width:100%;} </style> <script> $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $(".flight-filters.ow").css({ "display": "none", "opacity": "0" }).fadeOut("slow"); $('.b-widget > .container-fluid').addClass('fixed'); } else { $('.b-widget > .container-fluid').removeClass('fixed'); } }); </script>
– Ambika Tewari
18 hours ago

 | 
show 2 more comments

1 Answer
1

active

oldest

votes

up vote
0
down vote

use css like this:

.b-widget{

  position: fixed;

  width: 100%;

  top: 0;

  left: 0;

}

share|improve this answer

answered yesterday

shaghayegh sheykholeslami

1497

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53372705%2fjquery-keep-top-div-element-in-view-while-window-scrolling%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

active

oldest

votes

active

oldest

votes

up vote
0
down vote

use css like this:

.b-widget{

  position: fixed;

  width: 100%;

  top: 0;

  left: 0;

}

share|improve this answer

answered yesterday

shaghayegh sheykholeslami

1497

add a comment | 

up vote
0
down vote

use css like this:

.b-widget{

  position: fixed;

  width: 100%;

  top: 0;

  left: 0;

}

share|improve this answer

answered yesterday

shaghayegh sheykholeslami

1497

add a comment | 

up vote
0
down vote

up vote
0
down vote

use css like this:

.b-widget{

  position: fixed;

  width: 100%;

  top: 0;

  left: 0;

}

share|improve this answer

answered yesterday

shaghayegh sheykholeslami

1497

use css like this:

.b-widget{

  position: fixed;

  width: 100%;

  top: 0;

  left: 0;

}

share|improve this answer

answered yesterday

shaghayegh sheykholeslami

1497

share|improve this answer

share|improve this answer

answered yesterday

shaghayegh sheykholeslami

1497

answered yesterday

shaghayegh sheykholeslami

1497

answered yesterday

shaghayegh sheykholeslami

1497

1497

add a comment | 

add a comment | 

 

draft saved

draft discarded

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53372705%2fjquery-keep-top-div-element-in-view-while-window-scrolling%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here