CODEWITHSUNDEEP
jquerycss
Ian
Ian

Reputation: 11

Using JQuery to position an element exactly as the page is scrolled

I have a narrow but long image carosel in a div which sits to the right of the page below the header and top menu bar. Where my pages have lots of content and are considerably longer than the height of the iamge I would like the image to position in the following way:

I have tried many variations looking at position variable for example:

jQuery(document).ready(function(){  
     $(window).scroll(function () {  

 var y = $('#rightbackground').offset().top - $(window).scrollTop();
 var z = $(document).Height - $('#rightbackground').offset().top - $('#rightbackground').Height();

   if (y < 10 && z > 0) {$('#rightbackground').removeClass('content-stay2');  
            $('#rightbackground').addClass('content-scroll2');  

        } 

        else {  
            $('#rightbackground').addClass('content-stay2');  
            $('#rightbackground').removeClass('content-scroll2');  
        }  
    });       

});

but can't get the effect I want.

The HTML (from the comments):

<div id="rightbackgroundcontainer"> 
  <div id="rightbackground"> 
    <div id="mainright"> 
      <div id="comslider_in_point_53815"></div> 
<script type="text/javascript"> 
  var oCOMScript53815=document.createElement('script');     
  oCOMScript53815.src="comslider53815/comsliderd.js?timestamp=1381081498"; 
  oCOMScript53815.type='text/javascript'; 
  document.getElementsByTagName("head").item(0).appendChild(oCOMScript53815); 
</script> 
      <div id="bottomrighttxt"> 
        <h2><span class="greytext">Industry News</span></h2> 
      </div>
    </div> 
  </div> 
</div>

The CSS (also from the comments):

.content-stay2 {position: relative; } 
.content-scroll2 { 
  position: fixed; 
  float: left; 
  margin-left: 642px; 
  margin-top: -300px;
}

Thanks

Upvotes: 1

Views: 111

Answers (1)

Maxim Ershov
Maxim Ershov

Reputation: 1284

The rough solution for what you want is following. Instead of trying to locate your object at the page, place two anchors in your HTML:

<a id='top'></a> // at top of the page right before your object
<a id='bottom'></a> // before the page footer

Then your jQuery function would position your object based on the position of two static anchors that you place on your page. Here is the function:

$(window).scroll(function(){
    var top = $('#top').position().top()-10;
    var bottom = $('#bottom').position().top();
    var bottom_of_object = $('#rightbackground').position().top + 
        $('#rightbackground').height();
if (bottom <= bottom_of_object) // //when object hits footer
    {
        //your CSS to position it above footer anyway you want
        });
    } else if (top <= 0) //when object hits  the top of the window
    {
       $('#rightbackground').css({
        'position':'fixed',
         'top': '10px'
         })
    } else { // when the page scrolled to the top
       // your default CSS rules for your object
    }
})

And check position of those anchors relative to user's view point. Based on this you can position your element the way you want.

Upvotes: 0

Related Questions