jquery实现页面滑动到固定位置显示某个div

最新推荐文章于 2024-07-04 12:16:35 发布
最新推荐文章于 2024-07-04 12:16:35 发布
阅读量1.1w 收藏 1
点赞数
分类专栏： html+css 文章标签： jquery css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/doudou_demo/article/details/47829249
版权

直接上代码，一看就懂！

<!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>无标题文档</title>
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).scroll(function(){
    var h=$(this).scrollTop();//获得滚动条距top的高度
    //alert(h); 
    if(h>100){
        $("#xianshi").fadeIn();
    }else{
        $("#xianshi").fadeOut();
    }
});
</script>
<style type="text/css">
#test{
    width:300px;
    height:700px;
    margin-top:100px;
    background-color:#09C;
}
#xianshi{
    width:100px;
    height:100px;
    position:fixed;
    bottom:200px;
    left:600px;
    background-color:#36C;
    display:none;
}
</style>
</head>

<body>
<div id="test">
</div>
<div id="xianshi">
</div>
</body>
</html>
doudou_demo
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery实现将div中滚动条滚动到指定位置的方法
10-21
### jQuery实现将div中滚动条滚动到指定位置的方法知识点总结 #### jQuery的滚动方法概述 在Web开发中，经常需要对页面元素进行动态操作，其中一项常见的需求是实现滚动条滚动到指定位置的效果。使用jQuery可以...
JQuery设置div在按钮下方显示
u013414461的专栏
02-08 1972
function SetIntervalDivPosition() {     var myTop = $("#btnSetInterval").offset().top+$("#btnSetInterval").outerHeight();    //按钮top+按钮高度     var myLeft = $("#btnSetInterval").offset().left;     $(
jquery 在指定位置弹出div框并实现DIV由下向上展开的效果
mituan1234567的专栏
02-25 6677
http://blog.csdn.net/zdw_wym/article/details/11643229 1、功能要求：页面上一个div，默认是隐藏起来的，当点击页面中的a标签后，让这个div在a标签位置显示该div。 2、实现代码：$("#aChooseNumber").click(function () {                 $("#divChooseNumber").cs
jQuery 常用方法详解及示例
最新发布
abments的博客
07-04 936
jQuery 是一个快速、简洁的 JavaScript 库，它极大地简化了 HTML 文档操作、事件处理、动画效果以及 AJAX 交互。本文将详细介绍 jQuery 的一些常用方法，并通过示例说明它们的使用方法。用于选择 DOM 元素。示例： 筛选出与选择器匹配的元素。示例： 移除与选择器匹配的元素。示例： 选择具有指定索引值的元素。示例： 2. 操作 DOM 元素 获取或设置元素的 HTML 内容。示例： 获取或设置元素的文本内容。示例： 获取或设置元素的属性。示例： 移除元素的属性。示例：
jquery实现元素固定在顶部（滑动时判断）
往南的博客
09-12 751
原理:监听页面滚动事件，当滚动到的高度大于页面初始显示高度，就将想要固定在顶部的元素使用css样式的position: fixed;top:0; 固定在顶部，反之则取消固定！ 代码： window.onscroll = function(){ // 页面初始显示高度 var viewH = document.documentElement.clientHeight; // 当前所在位置 var currentH = $(window).scrollTop(); // 打印当前位置...
jquery滑动到一定位置固定
xiaheader
06-16 1757
$.fn.silde = function() { var position = function(element) { var top = element.position().top, pos = element.css ("position"); $(window).scroll(function() { var scrolls = $(this).scrollTop();
使用Jquery实现顶部导航栏在页面滑动到自身所在位置之后固定在顶部的效果
热门推荐
Love.Hope.Faith
12-20 1万+
如题。         《1》         我们经常会实现一种效果，这种效果让页面内的导航条在页面向下拉动的过程中一直固定在某个位置。有时候在顶部，有时候在侧边。实现的方法非常简单，只需要通过CSS进行元素的控制。         要点有：position:fixed;通过bottom、top、left和right四个属性来对元素在页面中的位置进行调整。         基本上对这两个
基于jquery实现页面滚动时顶部导航显示隐藏
10-23
通过阅读本文的描述和分析以上内容，可以了解到如何利用jQuery实现顶部导航栏在页面滚动时的显示与隐藏效果。这种效果在很多网站上都有应用，例如淘宝等知名网站，也是提升用户体验的一个重要手段。希望本文能帮助到...
移动端jQuery修正Web页面滑动时div问题的两则实例
10-22
本篇文章主要探讨了两个实例，旨在解决在移动端页面滑动时div元素出现的常见问题，即顶部固定（fixed定位）div在滑动时的闪动现象，以及在触摸移动（touchmove）事件中如何防止底层body的不必要滑动。 **实例一：...
jquery实现屏幕上方滑动显示div
05-18
本文将深入探讨如何使用 jQuery 实现屏幕上方滑动显示 div 的功能，这是一种常见的网页交互特效，可以用于通知、提示或者菜单栏的展示。 首先，我们需要在页面中引入 jQuery 库。你可以通过在 HTML 文件的 `<head>`...
JQuery实现鼠标滚轮滑动到页面节点
01-19
下面通过一段JQuery代码实现鼠标滚轮滑动到页面节点的详细介绍，并通过展示效果图展示给大家。 基于jQuery鼠标滚轮滑动到页面节点部分。这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效。...
js滑动到头部底部或目标位置和锚点相似多一个滑动效果
weixin_43420146的博客
03-21 328
js-点击按钮页面滚动到顶部，底部，指定位置 KaTeX parse error: Expected '}', got 'EOF' at end of input: …ick(function(){(‘html,body’).animate({scrollTop: ‘0px’}, 800);}); //页面滚动至顶部 KaTeX parse error: Expected '}', got...
jquery滑动到指定位置
追梦小狂魔的博客
03-08 2463
var current = $("#div_a").offset().top; // alert(current) $("html,body").stop().animate({ scrollTop: current }, 300); 300毫秒完成
向上滑动导航固定头部demo效果图示例（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
10-31 734
&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt; 向上滑动导航固定头部 &lt;/title&gt; &lt;style type="text/css"&amp...
Jquery DIV滚动至浏览器顶部位置固定
执
07-28 1096
看到感兴趣的文章，正好不会，补缺补漏
用jquery实现滑动内容至顶部，相应的菜单添加样式
liuli0927的博客
08-26 286
用jquery实现滑动内容至顶部，相应的菜单添加样式
Jquery鼠标滑动到标签当前位置后，固定在顶部
Web_Notes的博客
07-24 552
鼠标滑动到标签当前位置后，固定在顶部。 需要固定的 html代码 <div style="height: 1000px;width:500px;border:1px solid red;"></div>//为了离顶部有一定距离 <div style="height: 100px;background:yellowgreen" class="need_fix"></div> jquery代码 <script> //监听滚动事件
jQuery 滑动
ivenqin的博客
07-28 193
本节我们学习 jQuery 中的滑动，我们可以通过 slideDown()、slideUp()、slideToggle() 方法来实现元素的滑动效果。 slideDown()方法 slideDown() 方法用于实现元素向下滑动效果。如果元素已隐藏，则显示被选元素。 语法如下： $(selector).slideDown(speed,callback); 参数 speed 用于规定效果的时长，可选值有 slow、fast、毫秒。参数 callback 是滑动完成后所执行的函数名称。 示例： <!DO
jq滑动到指定位置出现div
大喵de博客
02-07 3108
test 往下拉！！！ 近日，百度地图发布《2018年春运出行预测报告》（以下简称“报告”），由百度地图、交通运输部科学研究院联合撰写，基于百度定位大数据、高速公路大数据、人口大数据、交通行业浮动车等去隐私化交通出行源数据，对2018年春运期间交通拥堵、人群出行特征等信息进行了预测，力求为全国人民，尤其是外出就业人员春运出行提供参考信息。 2 1 $(document).rea
一个div先隐藏,滑动到指定位置显示
06-09
然后，使用jQuery的scrollTop()方法获取当前页面的滚动距离，当滚动距离达到指定位置时，使用show()方法显示该div。 以下是示例代码： HTML： ```html <div id="myDiv" style="display:none;">这是要显示的内容</...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值