Use jquery to set elements that always display (scrolling with the page)

Source: Internet
Author: User
Tags relative

The title comparison is puzzling, probably the effect is now more and more see the website to add the module which scrolls with the page. For example, my head here is, of course, sometimes, the effect will be better, such as the general time fixed somewhere, the page scrolling so that the element rolled out of the display boundary, in order to facilitate the reader (or display ads), the module into a scrolling with the page. Test the effect is not bad (of course IE6 to die).

Haven't written a code-sharing article in a long time. Here's how to do this: get the height of the element (here positioned element a) from the top, then set the event for scroll scrolling, such as exceeding that height, setting the position of a to fixed, less than the height, and modifying back to relative. Here borrow Zww Uncle Map, as follows (of course, the uncle did not do so, but the effect is similar):

Here's the code.

var Scroller_anchor = JQuery (". Scroller "). Offset (). Top;
jquery (window). Scroll (function () {
  if (jquery (this). ScrollTop () >= Scroller_anchor && JQuery ('. Scroller '). CSS (' position ')!= ' fixed ' {
   jquery ('. Scroller '). css ({
  & nbsp;  ' position ': ' fixed ',
     ' margin-top ': ' 0 '
   
  } else if (JQuery (this). ScrollTop () < Scroller_anchor && jquery ('. Scroller '). CSS (' Position ')!= ' relative ') {
   jquery (". Scroller"). CSS ({
     Margin-top ': ' 10px ',
     ' position ': ' relative '
   };
  }
});

But sometimes there are problems with this, such as the element A has dynamic growth (shortened) elements (such as suddenly JS write a dongdong), so the first time to get the height is no longer appropriate. This requires setting an anchor point (set to the DIV element with a class ID of Scroller_anchor) (change the class to ID after ZWW). The code is as follows:

jquery (window). Scroll (function () {
 if (jQuery (" #content "). Find (" #scroller_anchor "). Length > 0 {
  var scroller_anchor = jQuery ("#scroller_anchor"). Offset (). Top;
  if (the jquery (this). ScrollTop () >= scroller_anchor && jquery ('. Scroller '). CSS (' position ')!= ' fixed ' {
   jquery ('. Scroller '). css ({
     ' position ': ' fixed ',
&NB sp;    ' margin-top ': ' 0 '
   });
  jquery ("#scroller_anchor"). CSS (' height ', ' 36px ');
  } else if (JQuery (this). ScrollTop () < Scroller_anchor &&amP JQuery ('. Scroller '). CSS (' position ')!= ' relative ') {
   jquery ("#scroller_anchor"). CSS (' height ' , ' 0px ');
   jquery (". Scroller"). CSS ({
     ' margin-top ': ' 10px ',
      ' position ': ' relative '
   });
  }
 }
});

The complete HTML code used above is as follows:

<div id= "Main-content" >
<div id= "Scroller_anchor" style= "height:0px; "></div>
<div class= "Scroller" >
......
</div>
</div>

As for the specific CSS, please set it according to your needs.

Article source: Axiu ' s blog

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.