2013/09/05

I tried placing the sidebar etc. in a fixed position and automatically tracking it.

I tried placing the sidebar etc. in a fixed position and automatically tracking it.

I often see things like automatically tracking sidebars on homepages and blogs, but I've wanted to try it for a while, so I gave it a try.

  1. < script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" >< / script >
  2. 　
  3. <script>
  4. $(function($) {
  5.     var tab = $("#sidebar"),
  6.     offset = tab.offset();
  7. 　
  8.     $(window).scroll(function () {
  9.     if($(window).scrollTop() > offset.top) {
  10.         tab.addClass("fixed");
  11.     } else {
  12.         tab.removeClass("fixed");
  13.     }
  14.   });
  15. });
  16. </script>

The indentation may be incorrect...
Line 5, this time I used #sidebar, but enter the ID and class of the part you want to fix here.
For now, I inserted the above into the head tag and added the following to the style sheet.

  1. .fixed {
  2. position : fixed ;
  3. top : 20px ;
  4. }

It's surprisingly easy.
The blog below was very helpful.
thank you.

via: [jQuery] Place sidebar etc. in a fixed position when the screen is scrolled a certain amount | Table 4 of OZPA

via: [Blogging Technique] Look at popular articles! How to fix the sidebar and automatically track | Yumepyon's wisdom

  • Add this entry to Hatena Bookmarks

At "naouniverse.com", the administrator writes about things, things, and the world that interest him.
Gadgets, cameras, design, programming, L'Arc～en～Ciel, etc...