<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS 页面下拉100像素出现悬浮窗口</title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
</head>
<body>
<div style="height:5000px;"></div>
<style type="text/css">
.fdPhone{position:fixed; _position:absolute; width:320px; height:50px; position:fixed; left:50%; margin-left:-160px; top:0px; display:none;}
</style>
<div class="fdPhone">
<a href="tel:123456789" target="_blank"><img src="images/phone.gif" width="320" height="50"></a>
</div>
<script type="text/javascript">
$(function(){
$(window).scroll(function() {
if($(window).scrollTop() >= 100){ //向下滚动像素大于这个值时，即出现浮窗~
$('.fdPhone').fadeIn(300); //浮窗淡入的时间，越小出现的越快~
}else{
$('.fdPhone').fadeOut(300); //浮窗淡出的时间，越小消失的越快~
}
});
$('.actGotop').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); //浮窗动画停留时间，越小消失的越快~
});
</script>
</body>
</html>
效果图：
相关推荐
总结以上知识点，本文详细介绍了利用jQuery实现页面下拉100像素后显示悬浮窗口的技巧，包括了事件监听、DOM操作、CSS样式设置及动画效果实现等多方面内容。通过本文所提供的代码示例和知识点，开发者可以更高效地...
"js页面下拉左右浮动固定代码.zip" 包含的就是一个实现这种效果的JavaScript插件，基于名为Sticky-js的库。Sticky-js是一个轻量级的解决方案，专门用于创建这类动态定位的元素。 Sticky-js的工作原理是监听用户的...
在JavaScript中，获取下拉列表（也称为选择框或`<select>`元素）的值是一项常见的任务，特别是在处理用户输入和交互时。本篇博文中，我们将深入探讨如何有效地实现这一功能。 首先，我们需要理解HTML中的`<select>`...
`js`文件夹中的JavaScript代码则是实现下拉列表功能的核心。JavaScript库可能包含了以下功能： 1. **列表搜索功能**：用户可以在输入框中输入关键词，快速过滤出匹配的选项。这通常是通过监听键盘事件，实时更新...
H5页面禁用微信浏览器下拉,使其下拉不会出现黑色来源显示，在JS文件中定义此方法即可。
综上所述，此项目通过JavaScript和CSS实现了H5页面的上拉刷新和下拉加载功能，同时结合了tab选项卡设计，提供了一种高效的浏览体验，用户可以在不同内容间切换，并轻松获取更新数据。在开发过程中，需要考虑性能优化...
js实现input输入框输入信息后出现下拉选择框，下拉框的数据源可以使根据输入的值从数据库中动态获取
### 在PB中巧用下拉数据窗口：详细解析与实践应用 #### 一、引言 在PowerBuilder（简称PB）开发中，提高用户界面的友好性和数据录入的准确性是至关重要的。为了达到这一目的，PB提供了一种非常实用的功能——下拉...
JavaScript（简称JS）无限下拉菜单是一种常见的网页交互设计，用于提供层次化的导航结构，尤其在网站或应用程序中，当菜单项数量庞大时，能够帮助用户更高效地浏览和访问内容。这种菜单允许用户在不关闭当前菜单的...
本示例“HTML5-JS 超出页面宽度部分的菜单栏转为下拉列表.rar”提供了一个解决方案，它利用HTML5和JavaScript技术，将超出页面宽度的部分自动转换为下拉菜单，从而提高用户体验。 首先，我们来看HTML5在这个场景中...
【JS导航下拉菜单】是一种常见的网页交互设计，它允许用户在主菜单上悬停时显示子菜单，提供更丰富的导航选项。这种设计通常应用于网站头部，帮助用户快速访问不同层级的页面。在本文中，我们将深入探讨JS...
本话题将深入探讨如何使用JavaScript实现页面下拉选单的动态过滤功能。 首先，我们从“insertRow.html”这个文件名可以推测，它可能是一个HTML页面，其中包含了用于插入行的JavaScript代码，这在动态过滤中是至关...
然而，有时为了实现更复杂的功能或者更好的视觉效果，开发者可能会选择使用JavaScript来模拟`<select>`下拉菜单。这种方法可以提供更多的自定义选项，如动画效果、多级下拉、异步加载等。 ### 1. 常规...
《使用jQuery实现页面下拉时固定在左侧的导航栏——stickySidebar.js的解析与实践》 在网页设计中，为了提升用户体验，一个常见的需求是创建一个可以随着页面滚动而始终保持在用户视线范围内的导航栏。这通常被称为...
在前端开发中，下拉菜单（Dropdown Menu）是常见的交互元素，用于节省页面空间并提供丰富的导航选项。JavaScript（简称js）是实现这种效果的重要工具，它可以赋予静态HTML页面动态特性，实现各种复杂的交互功能。...
在提供的压缩包中，我们有`index.html`作为网页的主体，`css`文件夹包含了样式表，`img`文件夹可能存储了页面所需的图像，而`js`文件夹则包含JavaScript代码，这部分代码是实现下拉加载的核心。 在HTML部分，我们...
在JavaScript中，下拉级联（Cascading Dropdown）是一种常见的前端交互设计，它用于创建一组相关联的下拉菜单，其中一个下拉菜单的选择会影响另一个下拉菜单的选项。这样的设计常见于数据筛选、地区选择等场景，可以...
简单的JS下拉二级菜单。效果显著。可以重复使用的并且代码简单
标题中的“JavaScript html js页面刷新之后下拉菜单选中值不变”是一个常见的前端开发问题，涉及到浏览器缓存、页面状态保持以及JavaScript操作DOM元素的知识点。在这个场景中，开发者希望在用户选择下拉菜单的一项...