javascript รบกวนขอแรงหน่อยน่ะครับ

[deadclosed]

จากเว็บตัวอย่างนี้น่ะครับ

http://static.jqueryfordesigners.com/demo/fixedfloat.html

ผมจากได้ประมาณนี้ครับ แต่ติดปัญหาคือ สังเกตุกล่องคอมเม้น มันจะฟิกค่าไว้
ผมอยากเลื่อนกล่องคอมเม้นมาอยู่รวมกับข้อความ แล้วเวลาเลื่อนลงไปอ่านข้อความ อยากให้กล่องคอมเม้นฟิคค่าเหมือนเดิม
แต่ข้อความไม่อยากให้กล่องคอมเม้นมันทับไว้ข้างหลัง อยากให้ข้อความ มันขยับมาอยู่ข้างๆ กล่องคอมเม้น

ใครพอมีสคริปตัวคล้ายๆ ที่กล่าวมา หรือเคยผ่านตา ช่วยแนะนำหน่อยน่ะครับ

ขอบคุณทุกคำตอบ 

[deadclosed]

  ขออนุญาติดัน

[deadclosed]

ดันอีก รอบ สุดท้ายล่ะ 

[sakang]

จะให้กล่องคอมเม้นอยู่ล่างสุดหรอครับ

[deadclosed]

จะให้กล่องคอมเม้นอยู่ล่างสุดหรอครับ

อยากให้กล่องค้มเม้นมันเลื่อนตาม หน้าจออ่ะครับ เหมือนในเว็บตัวอย่าง
แต่เว็บตัวอย่าง เมื่อเอามาอยู่รวมกับข้อความแล้วมัน จะทับข้อความไว้ข้างหลัง ผมอยากได้แบบพอเราเลยแล้วข้อความมันจะขยับมาด้านข้างกล่องคอมเม้นไม่ให้มันทับกัน

[komson94]

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
$(function () {
 
  var msie6 = $.browser == 'msie' && $.browser.version < 7;
 
  if (!msie6) {
    var top = $('#comment').offset().top - parseFloat($('#comment').css('margin-top').replace(/auto/, 0));
    $(window).scroll(function (event) {
      // what the y position of the scroll is
      var y = $(this).scrollTop();
     
      // whether that's below the form
      if (y >= top) {
        // if so, ad the fixed class
        $('#comment').addClass('fixed');
      } else {
        // otherwise remove it
        $('#comment').removeClass('fixed');
      }
    });
  } 
});
</script>

ประมาณนี้นะครับ $('#comment') = ค่าของ ไอดีที่เราต้องการให้ทำการแสดงผลแบบคงที่

[dragons_first]

คลิ๊กขวาแล้วดูซ๊อดโค๊ดนะครับ (อยากได้ก็เอามาเลย) แล้วปรับแต่งตรง css ครับ

body {
  color:#000;
  font-family:"Helvetica Neue",helvetica,sans-serif;
  line-height:1.4em;
}

#comments {
  float:left;
  width:450px;
}

#comment-wrapper {
  position: relative;
}

#commentWrapper { /* required to avoid jumping */
  left: 450px;
  position: absolute;
  margin-left: 35px;
  width:280px;
}

#comment {
  position: absolute;
  top: 0;
  margin-top: 20px;
  border-top: 1px solid purple;
  padding-top: 19px;
}

h2 {
  font-family:georgia,serif;
}

#comments ol li {
  border-top: 1px solid purple;
}

#comments ol li:first-child {
  border-top: 0;
}

#comment.fixed {
  position: fixed;
  top: 0;
}

[komson94]

ทำได้ 2 วิธีเลยหรอครับพอดีผมไม่เก่ง ccs  ขอเก็บความรู้ด้วยคนครับ 

[komson94]

เอาไปลวกมาละครับต้องใช้คู่กันครับ โค๊ตด้านล่างนี้ครับ 

โค้ด เลือก ขยาย

<style>
body {
  color:#000;
  font-family:"Helvetica Neue",helvetica,sans-serif;
  line-height:1.4em;
}

#comments {
  float:left;
  width:450px;
}

#comment-wrapper {
  position: relative;
}

#commentWrapper { /* required to avoid jumping */
  left: 450px;
  position: absolute;
  margin-left: 35px;
  width:280px;
}

#comment {
  position: absolute;
  top: 0;
  margin-top: 20px;
  border-top: 1px solid purple;
  padding-top: 19px;
}

h2 {
  font-family:georgia,serif;
}

#comments ol li {
  border-top: 1px solid purple;
}

#comments ol li:first-child {
  border-top: 0;
}

#comment.fixed {
  position: fixed;
  top: 0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js "></script>
<script>
$(function () {
 
  var msie6 = $.browser == 'msie' && $.browser.version < 7;
 
  if (!msie6) {
    var top = $('#comment').offset().top - parseFloat($('#comment').css('margin-top').replace(/auto/, 0));
    $(window).scroll(function (event) {
      // what the y position of the scroll is
      var y = $(this).scrollTop();
     
      // whether that's below the form
      if (y >= top) {
        // if so, ad the fixed class
        $('#comment').addClass('fixed');
      } else {
        // otherwise remove it
        $('#comment').removeClass('fixed');
      }
    });
  } 
});
</script>
<div id="comment">
ทดสอบ ทดสอบ คอมเม้น
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>