Question

我正在开发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" }, { 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>

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

1 个答案: