发生水平滚动时，将反馈按钮保持在右侧

问题描述

| 我正在ASP.NET中开发反馈表。我通过获取document.client宽度等将反馈图像放置在右边（请在下面找到完整的代码） 题： 发生onresize事件时，我可以保持反馈按钮的位置 当用户向右滚动页面时，我想将Feedack按钮和表单保持在右边。我该如何实现？请参考下面的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\" },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\" },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>

    

解决方法

听起来您应该使用CSS将按钮和表单定位在屏幕上的“ 2”位置。 例如，查看此处如何使用

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>