<html>
<head>
<style>
#banner {
background-color: #999;
height:50px;
width:300px;
color:#FFF;
font-size:16px;
line-height:50px;
text-align:center;
position:absolute; //这个属性很关键！
top:80px;
left:10px;
}
</style>
<script src="JS/jquery-1.10.2.min.js"></script>
<script>
$(function() {
var elm = $('#banner');
var startPos = $(elm).offset().top;
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(elm).css('position',((p) > startPos) ? 'fixed' : 'absolute'); //如果当前页面的<strong>顶部</strong>位置大于目标元素的<strong>顶部</strong>位置，那么目标元素的position属性为fixed，否则为absolute
$(elm).css('top',((p) > startPos) ? '0px' : '');
});
});
</script>
</head>
<body>
<div style="height:500px"></div>
<div id="banner">this is the moving and floating banner.</div>
<table width="200" border="1">
<tr>
<th scope="col">ID</th>
<th scope="col">Text</th>
</tr>
<tr height="300">
<td>a</td>
<td> </td>
</tr><tr height="300">
<td>a</td>
<td> </td>
</tr><tr height="300">
<td>a</td>
<td> </td>
</tr>
</table>
</body>
</body>
</body>
</html>
分享到：
相关推荐
例如，当最后一个项目的顶部达到可见区域的底部时，将其复制并插入到容器的末尾，然后调整原始第一项的位置，使用户感觉不到中断。 5. **优化与兼容性**：为了保证在各种浏览器上都能正常工作，我们需要考虑浏览器...
标题 "js实现div里面的内容滚动，并可以通过按钮控制" 涉及的是JavaScript在网页中创建动态滚动效果的技术。JavaScript是一种广泛用于网页交互的脚本语言，它可以操纵HTML元素，包括让内容在div（一个HTML布局容器）...
在进行网页开发时，我们常常需要实现一些交互效果，例如让一个div元素在滚动条滚动到页面的一定位置后停止随滚动条一起滚动。本文将介绍如何使用jQuery来实现这一功能。 首先，我们需要了解几个基本概念。在使用...
在网页设计和开发中，有时会遇到需要在页面滚动时隐藏或显示特定元素的情况，以优化用户体验。"jq滚动隐藏悬浮图标 停止显示"这个主题就是关于如何使用JavaScript库jQuery来处理这一问题的。这里我们将深入探讨如何...
if (scrollTop ) { // 当滚动到底部时 scrollTop = 0; // 重置回顶部 } container.style.top = scrollTop + 'px'; // 更新容器位置 }, 100); // 每100毫秒执行一次，可调整 // 清除定时器，如果需要停止滚动 ...
// 当滚动到顶部时，停止动画 clearInterval(timer); } } <!-- 页面内容 --> <div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">饭</div> <div style="height:1000px;text-...
这个插件不仅允许我们自定义滚动条的外观，还提供了丰富的滚动事件处理，如开始滚动、滚动中、滚动到底部、滚动到顶部以及正在滚动时的回调函数。 以下是一个基本的使用示例： ```html <!DOCTYPE html> ...
} /* 滚动到顶部 */ } ``` 3. **JavaScript增强**：如果需要更复杂的交互，如暂停、启动滚动，或者动态添加内容，可以使用JavaScript。例如，使用`setInterval`函数每隔一定时间更新文本的位置，或者监听用户事件...
当鼠标移入滚动容器时，通过`clearInterval`停止滚动；当鼠标移出时，则重新启动定时器继续滚动。 #### 整体工作原理 1. **初始化**：首先将`butong_net_top2`和`butong_net_bottom2`的内容设置为与`butong_...
- **用户体验优化**：鼠标悬停时停止滚动，增加交互性和用户友好度。 ##### 6. 实现步骤总结 1. **构建HTML结构**：使用`<div>`和`<img>`元素搭建页面基本框架。 2. **定义CSS样式**：设置容器和图片的样式，确保...
如果内容滚动到顶部，JavaScript会将最上面的链接移除并添加到末尾，这样就形成了无缝滚动的视觉效果。 `<marquee>` 标签虽然也被提及，但在这段代码中没有使用任何属性，可能是留作其他用途或作为备选的滚动方案。...
当`demo2`滚动到顶部时，我们将`demo1`的内容复制到`demo2`，形成一种无缝滚动的视觉效果。同时，我们通过`onmouseover`和`onmouseout`事件监听鼠标状态，以便在鼠标悬停时暂停滚动，鼠标离开时恢复滚动。 对于向下...
在网页开发中，有时我们需要知道用户滚动页面时，滚动条相对于页面顶部的位置。这在创建响应式设计、固定导航栏或者实现滚动特效时非常有用。标题提到的“jquery判断滚动条距离顶部的距离方法”就是这样的一个功能，...
- **JavaScript**: 通过定时器函数`setInterval`控制图片向上滚动的速度，并在鼠标悬停时停止滚动，在鼠标离开时继续滚动。 ##### 2. 底部滚动代码分析 ```html <!--¹--> <div id="butong_...
- 返回顶部按钮的 `onclick` 属性绑定了 `myScroll()` 函数，当用户点击这个按钮时，会触发滚动到顶部的效果。 5. **平滑滚动**： - 提供的代码中平滑滚动效果并不理想，因为每次滚动都是100像素，这可能导致滚动...
当鼠标移入"first"元素时，通过`clearInterval`停止滚动；鼠标移出时，重新设置定时器，恢复滚动。 6. **事件监听**：`onmouseover`和`onmouseout`事件分别在鼠标移入和移出"first"元素时触发相应的回调函数，实现...
这样可以确保在内容滚动到底部后，能够无缝回到顶部继续滚动。 ### 核心知识点二：启动滚动与暂停控制 #### 2.1 动态启动滚动 通过调用`marqueeStart`函数启动滚动效果： ```javascript function marqueeStart(i...
当鼠标悬停在`#colee`上时，滚动停止；鼠标离开时，滚动重新开始。 ### 向上滚动代码解析 与向下滚动类似，向上滚动的实现也分为HTML结构和JavaScript逻辑两部分。主要区别在于滚动方向的判断和滚动操作： ```...
// 鼠标移入时停止滚动 colee.onmouseover = function () { clearInterval(MyMar1) }; // 鼠标移出时继续滚动 colee.onmouseout = function () { MyMar1 = setInterval(Marquee1, speed) }; ``` - **变量...