Cách làm 1 thẻ đứng yên khi cuộn màn hình

Mình muốn giữ cho 1 cái xyz đứng yên khi cuộn màn hình, cái xyz này nằm ở khoảng 1,5 lần cuộn trang là thấy nó.
Trước khi cuộn tới thì xyz vẫn ở đó, khi cuộn đến xyz thì nó cố định cái top 1 khoảng xxpx.
vậy phải làm sao

 

hehe, mà hỉu ý mình chưa...tại k biết nói sao cho hỉu

 

Mã:

<script>


$(window).scroll(function() {
  $(".pin-container").each(function() {
  var s = $(window).scrollTop();
  var a = $(this);
  var b = $(".chacha", this);
  if (a.offset().top-1200 < s ) {
   
  b.css({
  position: "fixed",
  top: "60px"
  });
  } else {
  b.css({
  position: "absolute",
  top: "100px"
  });
  }
  } else {
  b.css({
  position: "relative",
  top: ""
  });
  }
  });
   
</script>

vd như thê này hả b?

 

là đoạn này bạn :

Mã:

<xen:if is="{$RecentThreads}">
   <xen:require css="discussion_list.css" />
   <xen:require css="EWRblock_RecentThreads.css" />
<script>


$(window).scroll(function() {
  $(".pin-container").each(function() {
  var s = $(window).scrollTop();
  var a = $(this);
  var b = $(".chacha", this);
  if (a.offset().top-1200 < s ) {
 
  b.css({
  position: "fixed",
  top: "60px"
  });
  } else {
  b.css({
  position: "absolute",
  top: "100px"
  });
  }
  } else {
  b.css({
  position: "relative",
  top: ""
  });
  }
  });
 
</script>
   <xen:if is="{$position} == 'top-left' OR {$position} == 'mid-left' OR {$position} == 'btm-left' OR {$position} == 'sidebar'">

     <div class="chacha" style="position: relative;">

       <div class="RecentThreads_bcat">
         <h3>{xen:phrase EWRblock_RecentThreads_title}</h3>

         <ol class="discussionListItems">
           <xen:foreach loop="$RecentThreads" value="$thread">
             <li id="thread-{$thread.thread_id}" class="{$thread.discussion_state} {xen:if {$thread.sticky}, 'sticky'} {xen:if {$thread.isNew}, 'unread'}" data-author="{$thread.username}">
               <xen:avatar user="$thread" size="s" img="true" />
               <div class="title">
                 <a href="{xen:link "threads{xen:if '{$thread.isNew} AND {$thread.haveReadData}', '/unread'}", $thread}"
                   title="{xen:if '{$thread.isNew} AND {$thread.haveReadData}', {xen:phrase go_to_first_unread_message}}"
                   class="{xen:if $thread.hasPreview, PreviewTooltip}"
                   data-previewUrl="{xen:if $thread.hasPreview, {xen:link threads/preview, $thread}}">{xen:helper snippet, $thread.title, 50}</a>
               </div>
               <div class="muted">
                 <a href="{xen:link members, $thread.lastPostInfo}">{$thread.lastPostInfo.username}</a> @
                 <a{xen:if '{$visitor.user_id}', ' href="{xen:link posts, $thread.lastPostInfo}" title="{xen:phrase go_to_last_message}"'} class="dateTime"><xen:datetime time="$thread.lastPostInfo.post_date" /></a>
               </div>
             </li>
           </xen:foreach>
         </ol>
       </div>
     </div>

   <xen:else />

     <xen:require css="inline_mod.css" />
     <xen:require js="js/xenforo/discussion_list.js" />

     <form action="{xen:link inline-mod/thread/switch}" method="post"
       class="DiscussionList InlineModForm"
       data-cookieName="threads"
       data-controls="#InlineModControls"
       data-imodOptions="#ModerationSelect option">

       <div class="discussionList section sectionMain" id="recentThreads">
         <dl class="sectionHeaders">
           <dt class="posterAvatar"></dt>
           <dd class="main">
             <a class="title"><span>{xen:phrase EWRblock_RecentThreads_title}</span></a>
             <a class="postDate"><span>{xen:phrase start_date}</span></a>
           </dd>
           <dd class="stats">
             <a class="major"><span>{xen:phrase replies}</span></a>
             <a class="minor"><span>{xen:phrase views}</span></a>
           </dd>
           <dd class="lastPost"><a><span>{xen:phrase last_message}</span></a></dd>
         </dl>

         <ol class="discussionListItems">
           <xen:foreach loop="$RecentThreads" value="$thread">
             <xen:include template="thread_list_item">
               <xen:map from="$thread.showForumLink" to="$showForumLink" />
             </xen:include>
           </xen:foreach>
         </ol>
       </div>

       <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
     </form>

   </xen:if>

   <xen:include template="preview_tooltip" />
</xen:if>

Mình chèn recent này vô porta nó nằm gần cuối trang

 

<script type="text/javascript">
$(document).ready(function() {
$('#chacha').scrollToFixed();
});
</script>
đoạn cần stick là gì b^^

 

Đoạn id mình cần giữ yên : <div class="RecentThreads_bcat">
Thêm vào page-co.. :
<script type="text/javascript" src="js/js/jquery-scrolltofixed.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#RecentThreads_bcat').scrollToFixed();
});
</script>
.... vẫn thấy k có gì . cái js trên k cần edit gì phải k

 

<xen:require js="http://vnnet.org/js/vnnet/jquery-scrolltofixed-min.js" />
<xen:require js="/js/js/jquery-scrolltofixed.js" />
<script type="text/javascript">
$(document).ready(function() {
$('#chacha').scrollToFixed();
});
</script>
<div class="chacha">