`
zfcejb
  • 浏览: 21041 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

div层随滚动条滚动

 
阅读更多

$().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不随滚动条的移动而改变位置

    标题"div不随滚动条的移动而改变位置"所指的问题是关于如何实现一个固定定位(fixed positioning)的 `div` 元素。这种效果使得 `div` 在页面上保持在一个特定位置,即使用户滚动页面,它也不会移动。这通常用于创建...

    随滚动条移动的DIV层

    ### 随滚动条移动的DIV层:实现与解析 #### 一、概述 在网页设计与开发过程中,为了提高用户体验以及页面的交互性,常常会遇到需要制作一个随滚动条移动的元素(如提示框、广告栏等)。本文将通过分析一段具体的...

    不随滚动条滚动而滚动的浮动效果

    不随滚动条滚动而滚动的浮动效果 在网页设计中,实现浮动效果是非常常见的需求之一。浮动效果可以使得网页元素在浏览器窗口中固定不动,或者跟随滚动条的滚动而移动。本篇文章将介绍如何实现不随滚动条滚动而滚动的...

    简易的jquery层随滚动条移动

    在网页设计中,有时我们需要创建一种...总结起来,通过引入jQuery库,创建层元素,并编写相应的jQuery代码,我们可以轻松实现层随滚动条移动的功能。这种方法简单易用,适用于各种网页设计项目,极大地提高了用户体验。

    jQuery控制div实现随滚动条滚动效果

    ### 知识点二:实现div随滚动条滚动的方法 文件内容中提到了两种实现div随滚动条滚动的方法。一种方法是使用jQuery的`animate`函数,该方法能够创建自定义的动画。通过监听窗口滚动事件(`$(window).scroll()`),当...

    层随滚动条移动

    ### 层随滚动条移动技术解析 #### 技术背景与概述 在Web开发中,实现元素(如层)随着页面滚动条的滚动而移动的效果,可以为用户提供更好的交互体验。这种技术通常被称为“粘性定位”或“固定定位”,但在这里提到...

    jQuery 弹出层 浮动遮罩层 提示框 并随页面滚动而滚动

    如:我想要<div id="ok">这里是弹出浮动遮罩层</div> 并随页面滚动而滚动 只要调用 $('#ok').showModel();这个方法就可以了 调用$('#ok').closeModel();就可以关闭层了 这个插件还有个好处是自动隐藏select控件,...

    基于JavaScript实现div层跟随滚动条滑动

    项目需求是这样的:在一个页面放2个悬浮框,悬浮框随页面的上下滚动有上下波动的效果,最终固定在同一位置,下面通过本文给大家分享基于JavaScript实现div层跟随滚动条滑动的相关资料,对js div跟随滚动条滑动相关...

    js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动).docx

    JS+CSS 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 本文将详细介绍使用 JS 和 CSS 实现遮罩居中弹出层,并且随浏览器窗口滚动条滚动。该弹出层能够在浏览器窗口中居中显示,且随着浏览器窗口的滚动而滚动。 ...

    css将div层固定显示在页面底部不随滚动条滚动

    总结来说,要创建一个不随滚动条滚动而始终保持在页面底部的div元素,我们使用了CSS的position属性,并将其值设为fixed。这样我们就可以通过调整right和bottom属性来控制元素距离窗口边缘的位置,同时设置width和...

    不随滚动条滚动的固定层广告代码

    <div class="fixed-ad">这里是不随滚动条滚动的广告</div> <!-- 更多页面内容... --> ``` 在这个例子中,`.fixed-ad`类定义了广告的样式,包括其`position: fixed;`属性,使其固定在屏幕顶部。你可以根据实际...

    div模块层随页面滚动遇顶固定的两种方法(js&jQuery)

    而当我们下拉滚动条,随着页面向下滚动,当此工具条接触到浏览器的上边缘时,这时就会独立出来固定在顶部,不跟随页面滚动而滚动了,如下图: 类似的例子效果我们在别的网站上都有看到过,例如腾讯微博首页上,当...

    不随滚动条滚动的模式窗口

    在网页设计和开发中,"不随滚动条滚动的模式窗口"是一种常见的用户体验设计技术,它允许用户在当前页面上打开一个全屏或半屏的弹出窗口,而这个窗口不会随着页面的滚动条移动。这种效果常用于图片预览、表单填写、...

    不随滚动条滚动广告代码.zip

    在网页设计中,实现“不随滚动条滚动”的广告效果是一项常见的需求,这通常涉及到HTML5、jQuery、前端JavaScript和CSS等技术。这样的广告通常被称为固定定位广告,它能够在用户滚动页面时始终保持在屏幕的特定位置,...

    JAVASCRIPT弹出DIV层窗口实例

    /* 或者 fixed,取决于弹窗是否随滚动条移动 */ width: 400px; height: 300px; background-color: white; border: 1px solid #ccc; padding: 20px; z-index: 9999; /* 保持在页面其他元素之上 */ } ()...

    div跟随固定在浏览器左边,上下不浮动,左右可跟随主体浮动

    2. **固定高度与宽度**:为了让`div`在上下拉动滚动条时保持固定,我们需要设定它的高度,确保它能覆盖整个页面或指定区域。同样,设置适当的宽度以适应内容。 ```css div { width: 200px; /* 自定义宽度 */ ...

    6种效果jquery页面滚动div层固定插件hcsticky

    它提供了6种不同的效果,使得div层在页面滚动时可以实现灵活的固定效果,增强了用户体验。 **一、基本概念** 1. **jQuery**: jQuery是一个流行的JavaScript库,简化了HTML文档遍历、事件处理、动画和Ajax交互,使...

    外部DIV如何强制宽度不被内部DIV撑开

    在本例中,内部`<div>`的宽度超过了外部`<div>`,但是由于设置了`overflow: auto`,外部`<div>`的宽度没有改变,并且添加了滚动条供用户滚动查看。 ### 结论 通过设置外部`<div>`的`overflow`属性为`hidden`或`...

Global site tag (gtag.js) - Google Analytics