Javascript 当出现水平滚动时,将反馈按钮保持在右侧

Javascript 当出现水平滚动时,将反馈按钮保持在右侧,javascript,jquery,Javascript,Jquery,我正在ASP.NET中开发反馈表单。我通过获取document.client width等将反馈图像放置在右侧(请在下面查找完整代码) 问题: 当onresize事件发生时,我可以保持反馈按钮的位置 当用户向右滚动页面时,我想保持反馈按钮和表单向右。我怎样才能做到这一点?请参阅下面的window.onScroll事件 //JQUERY $(document).ready(function() { var feed_width = $('#feedback').width(); /

我正在ASP.NET中开发反馈表单。我通过获取document.client width等将反馈图像放置在右侧(请在下面查找完整代码)

问题: 当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:


身体{
宽度:100%;
溢出:自动;
填充:0;
保证金:0;
字体系列:arial;
空白:nowrap;
}
h3
{ 
颜色:黑色
}
#回馈{
宽度:352px;
位置:绝对位置;
顶部:100px;
显示:无;
}
#反馈。formdiv{
宽度:300px;
浮动:左;
背景色:#ffffff;
-moz边界半径右下角:6px;
-moz边界半径左下角:6px;
最小高度:100px;
边框:实心1px黑色;
}
#反馈标签{
字体:粗体11px arial;
颜色:#80bae8;
}
#反馈文本区{
宽度:290px;
高度:100px;
颜色:黑色;
字体:普通11px verdana;
边框:实心1px#80bae8;
填充物:5px;
背景色:#ffffff;
-moz盒阴影:插入1px 1px 1px#4c0b3f;
-webkit盒阴影:插入1px 1px 1px#4c0b3f;
调整大小:无;/*禁止在chrome中扩展textarea*/
}
#反馈输入[type=“text”]{
颜色:黑色;
字体:普通11px verdana;
填充:3倍;
宽度:200px;
高度:25px;
边框:实心1px#80bae8;
颜色:黑色;
-moz边界半径:4px;
-webkit边界半径:4px;
背景色:#ffffff;
-moz盒阴影:插入1px 1px 1px#4c0b3f;
-webkit盒阴影:插入1px 1px 1px#4c0b3f;
}
#反馈输入[type=“submit”]{
背景色:白色;
边框:实心1px#80bae8;
颜色:#80bae8;
字体:粗体13px arial;
填充:2px6px;
-moz边界半径:8px;
-webkit边界半径:8px;
光标:指针;
}
#反馈。左,
#反馈。对{
宽度:26px;
高度:100px;
浮动:左;
光标:指针;
}
#反馈。反馈关闭{
光标:指针;
余量:-10px-5px 0px 0px;
}
#错误
{
颜色:红色;
填充:4px;
字体大小:11px;
}
.谢谢
{
文本对齐:居中;
显示:无;
}
.textmsg
{
字号:28px;
字体系列:'Georgia',Times New Roman,Times,衬线;
文本对齐:居中;
}

听起来您应该使用CSS将按钮和表单定位在屏幕上的固定位置

例如,请参见此处如何使用
位置:固定
右侧
底部
样式:

<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>
这是导致向右滚动的原因。
这是将在屏幕上保持不变的东西。

无法发布HTML,因为它有图像标签,而且新用户无法发布。奥利弗:谢谢您的回复。按钮应仅显示,且表单应位于屏幕右侧,对用户隐藏。当用户点击反馈时,整个div就会进入。
<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>