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