如何解决发生水平滚动时,将反馈按钮保持在右侧
| 我正在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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。