javascript - Change margin-top position of an fixed positioned element after reaching the bottom of the page? - Stack Overflow

admin管理员组

文章数量:1310306

I need to change top-margin of an fixed div element from margin-top: 200px to margin top 0px after reaching the bottom of the page (or 200px from bottom) using vertical scrollbar.

And toggle return back if scrolling back to the top.

I guess some javascript/jQuery code code do that.

my html/layout code:

<div id="header" style="position: fixed; margin-top: 0px;">
     Header content
</div>
<div id="main">
    <div id="left" style="position: fixed; margin-top: 200px;">Google Ads here</div>
    <div id="right">Content posts here</div>
</div>
<div id="footer">
    Footer content
</div>

EDIT: Here are some images to make my question more clear.

1. normal state when you load the page:

2. problem when you scroll down, and the google ads column is in conflict with footer:

3. how it needs to be solved:

I need to change top-margin of an fixed div element from margin-top: 200px to margin top 0px after reaching the bottom of the page (or 200px from bottom) using vertical scrollbar.

And toggle return back if scrolling back to the top.

I guess some javascript/jQuery code code do that.

my html/layout code:

<div id="header" style="position: fixed; margin-top: 0px;">
     Header content
</div>
<div id="main">
    <div id="left" style="position: fixed; margin-top: 200px;">Google Ads here</div>
    <div id="right">Content posts here</div>
</div>
<div id="footer">
    Footer content
</div>

EDIT: Here are some images to make my question more clear.

1. normal state when you load the page:

2. problem when you scroll down, and the google ads column is in conflict with footer:

3. how it needs to be solved:

• javascript
• jquery

Share Improve this question Follow edited Sep 26, 2012 at 14:12 Derfder asked Sep 21, 2012 at 11:39 DerfderDerfder 3,3241111 gold badges5151 silver badges8585 bronze badges 3

• 2 Yes, Javascript could do that. – chrisfrancis27 Commented Sep 21, 2012 at 11:40
• 2 An element with position='fixed' is not in the document flow and does not have margins. You can change the top value... – kennebec Commented Sep 21, 2012 at 14:47
• Can you make me clear? As per my understanding you have a div at 200px from top. You want as you scroll your page it's gradually moving to top. When you scroll at end of document it should be at 0px at top? am i right? – Tarun Commented Sep 26, 2012 at 7:07

Add a ment  | 

8 Answers 8

Sorted by: Reset to default 2

Derfder...

Voila, my proposed solution:

http://jsfiddle/YL7Jc/2/

The animation's a tad jerky, but I think it does what you want

(It's my take on an earlier s/o post:
Can I keep a DIV always on the screen, but not always in a fixed position? )

Let me know what you think!

Try below code which binds an event to window.scroll to check if the page hits the bottom (bottom in 200px) and moves the #left to top (margin-top: 0)..

DEMO: http://jsfiddle/6Q6XY/4/ ( added some demo code to see when it hits the bottom.)

$(function() {
    var $left = $('#left');

    $(window).bind('scroll', function() {   
        if (($(document).height() 
               - (window.pageYOffset + window.innerHeight)) < 200) {                
            $left.css('marginTop', 0);
        } else {
            $left.css('marginTop', 200);
        }
    });
});

Reference: https://stackoverflow./a/6148937/297641

You need to implement the window scroll function, this is a jquery implementation so please ensure you include the latest jquery libaries

$(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() == $(document).height()) {

            //if it hits bottom
            $('#left').css("margin-top", "0px");

        }
        else {

            $('#left').css("margin-top", "200px");

        }
    });

HTML

<div id="main" style="width: 960px; margin: 0px auto;"> 
    <div id="left" style="position: fixed; top: 200px; left: 0px; background: #000; width: 100%; color: #fff;">Google Ads here</div> 
    <div id="right"></div> 
</div> 

JAVASCRIPT

<script type="text/javascript">
    $(function() {
        var documentHeight = $(document).height();
        var windowHeight = $(window).height();
        var left = $('#left');
        var leftTopPosition = $('#left').css('top');
        leftTopPosition = parseInt(leftTopPosition.substring(0, leftTopPosition.length-2));             

        $(window).scroll(function(){
            var pageOffsetY = window.pageYOffset;           
            if((documentHeight - pageOffsetY - windowHeight) <= 200 && leftTopPosition == 200) {
                left.stop().animate({
                    'top': '0px'
                });

                leftTopPosition = 0;
            }

            else if((documentHeight - pageOffsetY - windowHeight) > 200 && leftTopPosition == 0) {
                left.stop().animate({
                    'top': '200px'
                });

                leftTopPosition = 200;
            }
        });
    });

</script>

Hi Firstly you should have been more clearer in the first place before marking people down, as everyone give similar answers then it shows the question was not clear.

See Js Fiddle for a potential fix, please tweak as you need it with the pixels etc

for this problem you should use z-index in css

Try somethins like this

      if ($(window).scrollTop() == $(document).height() - $(window).height())   
           {
              document.getElementById(yourid).setAttribute("style","margin-top:0px");
           }

Try this:

$(window).bind('scroll', function(){
   if(($(window).height()-$(window).scrollTop())<200)
   {
       $('#left').css('margin-top',$(window).scrollTop());
   }
   else
   {
       $('#left').css('margin-top',200);
   }
});

本文标签：