html 下拉到一定位置,浏览器向下滚动到一定位置继续滚动时，侧边导航固定在页面顶部，再滚动到一定位置时页面再向下滚动侧边导航不再固定。这种效果怎么实现呢...

1.浏览器向下滚动到一定位置继续滚动时，侧边导航固定在页面顶部，再滚动到一定位置时页面再向下滚动侧边导航不再固定。页面向上滚动到一定位置继续滚动时，侧边导航保持在原来位置。这种效果怎么实现呢

2.、

参考代码：

$(function(){

//获取要定位元素距离浏览器顶部的距离

var navH = $(".search_box").offset().top;

//滚动条事件

$(window).scroll(function(){

//获取滚动条的滑动距离

var scroH = $(this).scrollTop();

//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定

if(scroH>=navH){

$(".search_box").css({position: 'fixed',top:0});

}

else if(scroH

$(".search_box").css({position: "static"}); }

})

但是此代码无法实现滚动到一定位置时页面再向下滚动侧边导航不再固定。

希望侧边只在在主题部分。但是事实上继续向下滚动直到到底部，侧边导航都会出现在屏幕上。

4.代码实现效果：

初始位置

向下滚动

向上滚动到一定页面

需要实现效果：

初始位置：

向下滚动

继续向下动(未实现)

html 下拉到一定位置,浏览器向下滚动到一定位置继续滚动时，侧边导航固定在页面顶部，再滚动到一定位置时页面再向下滚动侧边导航不再固定。这种效果怎么实现呢...相关推荐

下拉框--请选择-- 浏览器渲染不同造成页面初始化不一致
问题: 页面下拉框初始化时,展示"--请选择--" : 在Google.Firefox浏览器渲染正常,但在IE(低版本)浏览器下不展示. 修复: (1) 修改对应的*.js文件: ...
element ui中select 下拉框在火狐浏览器最后一行显示不完全（谷歌正常）
在项目开发的时候用到了el-scrollbar组件并且设置了隐藏横向滚动条下面展示一些内联代码片. // 隐藏横向滚动条 .el-scrollbar__wrap {overflow-x: hid ...
android仿微信红包动画、Kotlin综合应用、Xposed模块、炫酷下拉视觉、UC浏览器滑动动画等源码...
Android精选源码仿微信打开红包旋转动画使用Kotlin编写的Android应用,内容你想象不到 Android手机上的免Root Android系统日志Viewer 一个能让微信 Mater ...
android仿微信红包动画、Kotlin综合应用、Xposed模块、炫酷下拉视觉、UC浏览器滑动动画等源码
Android精选源码仿微信打开红包旋转动画使用Kotlin编写的Android应用,内容你想象不到 Android手机上的免Root Android系统日志Viewer 一个能让微信 Mater ...
listview刷新_Flutter NestedScrollView 滑动折叠头部下拉刷新效果
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. Flutter是谷歌推出的最新的移动开发框架. 本实例运行效果如下 : //启动函数void main() { runApp(Root ...
Flutter NestedScrollView 滑动折叠头部下拉刷新效果
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,优美的应用体验来自于细节的处理,更源自于码农的自我要求与努力 Flutter是谷歌推出的最新的移动开发框架. [x1]微信公众号的每日 ...
html 下拉滚动加载,原生js滚动到底部加载数据和下拉刷新 Scrollload
初衷如今移动端站点越来越多,滚动到底部加载数据和下拉刷新的需求非常的常见,即使现在很多pc站点也会有这样的需求,比如百度首页就有.虽然简单的完成这么一个功能非常方便,但是滚动往往会成为性能的瓶颈,处 ...
原生js滚动到底部加载数据和下拉刷新 Scrollload
原文地址 https://github.com/fa-ge/Scrollload/blob/master/README.md 初衷如今移动端站点越来越多,滚动到底部加载数据和下拉刷新的需求非常的常见 ...
模仿QQ的左右滑动切换界面和下拉更新的效果
1.首先看看布局主布局main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayo ...
Angular实现虚拟滚动多选下拉框笔记
要求: 实现一个angular多选下拉框组件,当有超过2000个选项时,滑动/挑选/全选均不卡. 正篇: 为了方便,这里不考虑扩展性,所以规定下拉框展开只显示7行数据,行高27px 约定:input为 ...

html 下拉到一定位置,浏览器向下滚动到一定位置继续滚动时，侧边导航固定在页面顶部，再滚动到一定位置时页面再向下滚动侧边导航不再固定。这种效果怎么实现呢...

html 下拉到一定位置,浏览器向下滚动到一定位置继续滚动时，侧边导航固定在页面顶部，再滚动到一定位置时页面再向下滚动侧边导航不再固定。这种效果怎么实现呢...相关推荐

最新文章

热门文章