CODEWITHSUNDEEP
javascriptjquery
Derfder
Derfder

Reputation: 3324

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

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: enter image description here

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

  3. how it needs to be solved: enter image description here

Upvotes: 4

Views: 9989

Answers (8)

Ali Yazdanifar
Ali Yazdanifar

Reputation: 538

for this problem you should use z-index in css

Upvotes: 0

edward ingram
edward ingram

Reputation: 51

Derfder...

Voila, my proposed solution:

http://jsfiddle.net/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!

Upvotes: 2

CR41G14
CR41G14

Reputation: 5594

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

Upvotes: 0

Tarun
Tarun

Reputation: 1898

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>

Upvotes: 0

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79850

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.net/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.com/a/6148937/297641

Upvotes: 1

Jonah
Jonah

Reputation: 13

Try this:

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

Upvotes: -1

CR41G14
CR41G14

Reputation: 5594

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");

        }
    });

Upvotes: 0

Aravindhan
Aravindhan

Reputation: 3626

Try somethins like this

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

Upvotes: -1

Related Questions