$().ready(function(){
//左右移动滚动条
var scrollDivEl = $(".scrollDiv");
var scrollDivEl2 = $(".scrollDiv2");
var scrollHtml =$('#scrollTd').html();
//1.div左测表头高度控制(当某个路排占2td时候,需动态赋入各个路排相应高度)
$('#divTable').height($('#dataTable').height()-$('#looVehicleNum').height()-$('#looVehicleSum').height()-7);
$('#divLupai').height($('#lupai').height());
//2.div上测表头宽度控制
/* $('#div2Table').width($('#dataTable').width()+2);
//2.1找出所有表头的td元素,并赋值相应的width
var dataTd=$('.dataUpTable td');
$('.dataDivTable td').each(function(i){
var $td=$(this);
$td.width($('.dataUpTable td:eq('+i+')').width());
});
$('.divLoopTr td').each(function(i){
var $td=$(this);
$td.width($('.loopTr td:eq('+i+')').width());
}); */
//alert(dataTd[0].style.width);
//
if(scrollHtml==null){
scrollDivEl.hide();
scrollDivEl2.hide();
}
var menuXloc = scrollDivEl.offset().left;
//上下移动滚动条
var menuYloc = scrollDivEl2.offset().top;
$(window).scroll(function (){
//左右移动
var offsetLeft = menuXloc + $(window).scrollLeft();
if(offsetLeft>6){
offsetLeft= offsetLeft-6+"px";
}else{
offsetLeft= offsetLeft+"px";
}
scrollDivEl.animate({left : offsetLeft},{ duration:250 , queue:false });
//上下移动
//alert(menuYloc);
var offsetTop = menuYloc + $(window).scrollTop();
//alert(offsetTop);
if($(window).scrollTop()>250){
$('.scrollDiv2').show();
offsetTop= offsetTop-250+"px";
scrollDivEl2.animate({top : offsetTop},{ duration:250 , queue:false });
}else{
$('.scrollDiv2').hide();
}
//alert(offsetTop);
});
//左侧移动表格与基表中间的路排位置相比较,判断上下行
$('[id^="fbusnumid"]').click(function() {
var divLeft=menuXloc+$(window).scrollLeft();
var radioOffset=$('#radioRight').offset().left;
if(divLeft>radioOffset-160){
updateByBusnum(1,$(this).val());
}else{
updateByBusnum(0,$(this).val());
}
});
});
分享到:
相关推荐
标题"div不随滚动条的移动而改变位置"所指的问题是关于如何实现一个固定定位(fixed positioning)的 `div` 元素。这种效果使得 `div` 在页面上保持在一个特定位置,即使用户滚动页面,它也不会移动。这通常用于创建...
### 随滚动条移动的DIV层:实现与解析 #### 一、概述 在网页设计与开发过程中,为了提高用户体验以及页面的交互性,常常会遇到需要制作一个随滚动条移动的元素(如提示框、广告栏等)。本文将通过分析一段具体的...
不随滚动条滚动而滚动的浮动效果 在网页设计中,实现浮动效果是非常常见的需求之一。浮动效果可以使得网页元素在浏览器窗口中固定不动,或者跟随滚动条的滚动而移动。本篇文章将介绍如何实现不随滚动条滚动而滚动的...
在网页设计中,有时我们需要创建一种...总结起来,通过引入jQuery库,创建层元素,并编写相应的jQuery代码,我们可以轻松实现层随滚动条移动的功能。这种方法简单易用,适用于各种网页设计项目,极大地提高了用户体验。
### 知识点二:实现div随滚动条滚动的方法 文件内容中提到了两种实现div随滚动条滚动的方法。一种方法是使用jQuery的`animate`函数,该方法能够创建自定义的动画。通过监听窗口滚动事件(`$(window).scroll()`),当...
### 层随滚动条移动技术解析 #### 技术背景与概述 在Web开发中,实现元素(如层)随着页面滚动条的滚动而移动的效果,可以为用户提供更好的交互体验。这种技术通常被称为“粘性定位”或“固定定位”,但在这里提到...
如:我想要<div id="ok">这里是弹出浮动遮罩层</div> 并随页面滚动而滚动 只要调用 $('#ok').showModel();这个方法就可以了 调用$('#ok').closeModel();就可以关闭层了 这个插件还有个好处是自动隐藏select控件,...
项目需求是这样的:在一个页面放2个悬浮框,悬浮框随页面的上下滚动有上下波动的效果,最终固定在同一位置,下面通过本文给大家分享基于JavaScript实现div层跟随滚动条滑动的相关资料,对js div跟随滚动条滑动相关...
JS+CSS 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 本文将详细介绍使用 JS 和 CSS 实现遮罩居中弹出层,并且随浏览器窗口滚动条滚动。该弹出层能够在浏览器窗口中居中显示,且随着浏览器窗口的滚动而滚动。 ...
总结来说,要创建一个不随滚动条滚动而始终保持在页面底部的div元素,我们使用了CSS的position属性,并将其值设为fixed。这样我们就可以通过调整right和bottom属性来控制元素距离窗口边缘的位置,同时设置width和...
<div class="fixed-ad">这里是不随滚动条滚动的广告</div> <!-- 更多页面内容... --> ``` 在这个例子中,`.fixed-ad`类定义了广告的样式,包括其`position: fixed;`属性,使其固定在屏幕顶部。你可以根据实际...
而当我们下拉滚动条,随着页面向下滚动,当此工具条接触到浏览器的上边缘时,这时就会独立出来固定在顶部,不跟随页面滚动而滚动了,如下图: 类似的例子效果我们在别的网站上都有看到过,例如腾讯微博首页上,当...
在网页设计和开发中,"不随滚动条滚动的模式窗口"是一种常见的用户体验设计技术,它允许用户在当前页面上打开一个全屏或半屏的弹出窗口,而这个窗口不会随着页面的滚动条移动。这种效果常用于图片预览、表单填写、...
在网页设计中,实现“不随滚动条滚动”的广告效果是一项常见的需求,这通常涉及到HTML5、jQuery、前端JavaScript和CSS等技术。这样的广告通常被称为固定定位广告,它能够在用户滚动页面时始终保持在屏幕的特定位置,...
/* 或者 fixed,取决于弹窗是否随滚动条移动 */ width: 400px; height: 300px; background-color: white; border: 1px solid #ccc; padding: 20px; z-index: 9999; /* 保持在页面其他元素之上 */ } ()...
2. **固定高度与宽度**:为了让`div`在上下拉动滚动条时保持固定,我们需要设定它的高度,确保它能覆盖整个页面或指定区域。同样,设置适当的宽度以适应内容。 ```css div { width: 200px; /* 自定义宽度 */ ...
它提供了6种不同的效果,使得div层在页面滚动时可以实现灵活的固定效果,增强了用户体验。 **一、基本概念** 1. **jQuery**: jQuery是一个流行的JavaScript库,简化了HTML文档遍历、事件处理、动画和Ajax交互,使...
在本例中,内部`<div>`的宽度超过了外部`<div>`,但是由于设置了`overflow: auto`,外部`<div>`的宽度没有改变,并且添加了滚动条供用户滚动查看。 ### 结论 通过设置外部`<div>`的`overflow`属性为`hidden`或`...