當水平滾動發生時，將反饋按鈕保持在右側

Question

我正在ASP.NET中開發反饋表單。我通過獲取document.client寬度等將反饋圖像右側（pleaes在下面找到完整的代碼）

問： 當在onResize事件發生

我要保持我能保持反饋按鈕的位置當用戶將頁面向右滾動時，反饋按鈕並向右移動。我怎樣才能做到這一點？請參閱下面的window.onScroll事件。

//JQUERY 
$(document).ready(function() { 
    var feed_width = $('#feedback').width(); 
    //var scr_w = window.innerwidth; // Screen Width 
    var scr_w = (window.innerWidth ? window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.offsetWidth)); 
    // 26 is width of the veritcal feedback button 
    var btn_width = 26; 
    var move_right = scr_w - btn_width - 15; 
    var slide_from_right = scr_w - (feed_width - btn_width) - 26; 
    var center = (scr_w/2) - (feed_width/2); 
    var intX = document.getElementById('feedback').style.left; 

    //maintain the spot when windows is resized 
    window.onresize = function() { 
     scr_w = (window.innerWidth ? window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.offsetWidth)); 
     // 26 is width of the veritcal feedback button 
     move_right = scr_w - btn_width; 
     slide_from_right = scr_w - (feed_width - btn_width); 
     positioningForm(); 
    } 

    window.onscroll = function() { 
     move_right = +move_right; 
     positioningForm(); 
    } 

    function positioningForm() { 
     $('#feedback').css({ "left": move_right + "px" }).show(); 
     //ntX = document.getElementById('feedback').style.left; 
     //document.getElementById('name').value = $('#hName').val(); 
    } 

    function slideFromRight() { 
     $('#feedback').animate(
    { left: slide_from_right + "px" }, 
    { duration: 'slow', easing: 'jswing' }); 

    } 

    function moveRight() { 
     $('#feedback').animate({ left: move_right + "px" }, { duration: 'slow', easing: 'jswing' }); 
     setTimeout("$('.right_btn').show();", 600); 
    } 

    // Positioning the feedback form at the time of page loading 
    positioningForm(); 

    // Handling the right_btn and lift_btn event animations 
    $('.right_btn').click(function() { 
     slideFromRight(); 

    }); 

    // Moving left or right by clicking close button 
    $('.feed_close').click(function() { 
     moveRight(); 
    }); 

    //Submit button clicked 
    $('#submit_btn').click(function() { 
     var msg = $('#msg').val(); 
     if (msg.length > 0) { 
      $('.right_btn').hide(); 
      $('.box').hide(); 
      $('#feedback').animate({ left: center + "px" }, { duration: 'slow', easing: 'jswing' }); 
      $('.thankyou').show(); 
     } 
     else { 
      $('#error').html('Enter some thing'); 
      $("#msg").focus(); 
     } 
    }); 
}); 

CSS：

<style type="text/css"> 
    body{ 
     width: 100%; 
     overflow: auto; 

     padding: 0; 
     margin: 0; 
     font-family:arial; 
     white-space:nowrap; 
    } 

    h3 
    { 
     color:black 
    } 

    #feedback{ 
     width: 352px; 
     position: absolute; 
     top: 100px; 
     display: none; 

    } 
    #feedback .formdiv{ 
     width: 300px; 
     float: left; 
     background-color: #ffffff; 
     -moz-border-radius-bottomright: 6px; 
     -moz-border-radius-bottomleft: 6px; 

     min-height:100px; 
     border:solid 1px black; 
    } 
    #feedback label{ 
     font:bold 11px arial; 
     color: #80bae8; 
    } 
    #feedback textarea{ 
     width: 290px; 
     height: 100px; 
     color: black; 
     font: normal 11px verdana; 
     border: solid 1px #80bae8; 
     padding: 5px; 
     background-color: #ffffff; 
     -moz-box-shadow: inset 1px 1px 1px #4c0b3f; 
     -webkit-box-shadow: inset 1px 1px 1px #4c0b3f; 
     resize: none; /* disable extending textarea in chrome */ 
    } 
    #feedback input[type="text"]{ 
     color: black; 
     font: normal 11px verdana; 
     padding: 3px; 
     width: 200px; 
     height: 25px; 
     border: solid 1px #80bae8; 
     color: black; 
     -moz-border-radius: 4px; 
     -webkit-border-radius: 4px; 
     background-color: #ffffff; 
     -moz-box-shadow: inset 1px 1px 1px #4c0b3f; 
     -webkit-box-shadow: inset 1px 1px 1px #4c0b3f; 
    } 
    #feedback input[type="submit"]{ 
     background-color: white; 
     border: solid 1px #80bae8; 
     color: #80bae8; 
     font:bold 13px arial; 
     padding: 2px 6px; 
     -moz-border-radius: 8px; 
     -webkit-border-radius: 8px; 
     cursor: pointer; 
    } 
    #feedback .left_btn, 
    #feedback .right_btn{ 
     width: 26px; 
     height: 100px; 
     float: left; 
     cursor: pointer; 
    } 

    #feedback .feed_close{ 
     cursor: pointer; 
     margin:-10px -5px 0px 0px; 

    } 
    #error 
    { 
    color:red; 
    padding:4px; 
    font-size:11px; 

    } 
    .thankyou 
    { 
text-align:center; 
display:none; 


    } 
    .textmsg 
    { 
    font-size:28px; 
    font-family:'Georgia',Times New Roman,Times,serif; 
    text-align:center; 


    } 

</style> 

Answer 1

聽起來你應該使用CSS來定位在屏幕上的位置fixed按鈕和形式。

例如，看看如何position:fixed，right和bottom樣式這裏使用：

<div style="width:2000px; background-color:yellow;">This is the thing that causing scrolling to the right.</div> 

<div style="position:fixed; right:100px; bottom:100px; background-color:yellow;"> 
This is the thing that will stay fixed on screen. 
</div>