css实现网页栏目左侧固定当滚动到底部时自动调整位置 _CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

可以参考一下css实现滚动页面导航栏固定在顶部(吸顶效果)www.zgxue.com防采集请勿采集本网。

预览地址:

设置固定列的偏移量$(\"#table th:first-child,tr>td:first-child\").css(\"left\",$(\"#div_abroad\").offset().left);(\"#table th:nth-child(2),tr>td:nth-child(2)\").css(\"left\",$(\"#div_abroad\").offset().

https://ovsexia.gitee.io/leftfixed/

1、在电脑上打开软件,新建一个html文件,在head部分,编写css样式,list-style-type:none;是除掉导航前面默认带的点,li a,li a.active,li a:hover:not(.active)设置鼠标滑到导航栏的颜zd色

html:

<style type=\"text/css\"> body { background-image:url('bg.jpg');background-repeat:no-repeat;background-attachment:fixed;}

<!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" /><script src="js/jquery-1.10.1.min.js" type="text/javascript"></script><link href="css/layout.css" type="text/css" rel="stylesheet" /><link href="css/style.css" type="text/css" rel="stylesheet" /></head><div class="top"></div><div class="page"> <div class="left"> <div class="left_poi"></div> <div class="left_in"> <p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p> </div><!--left_in--> <script> $(window).scroll(function() { saction(); }); function saction() { sj = 20; //底部间隔 st = $(window).scrollTop(); //滚动条高度 sd = $(".left_poi").offset().top; sd_h = $(".left_in").height(); sb = $(".bottom").offset().top; sb_h = $(".bottom").height(); rd_h = $(".right").height(); bh = window.innerHeight; si = sb-sd_h; if(st>sd && rd_h>=sd_h){ $(".left_in").addClass("on"); if(st>si){ sy = bh-(sb-st)+sj; $(".left_in").css({"top":"auto","bottom":sy+"px"}); }else{ $(".left_in").css({"top":"","bottom":""}); } }else{ $(".left_in").removeClass("on"); } } </script> </div><!--left--> <div class="right"></div> <div class="clear"></div></div><!--page--><div class="bottom"></div></body></html>

top:0;left:0;width:960px;height:30px;background:#f30;浮动定位的div 你看看这个html文件代码,这是设置一个div在顶部固定,不随滚动条滚动,不知道你是不是要这种效果

css

css让文字放在固定的位置: 1、通过position的绝对定位,然后在通过left和top就可以设置你的图片位置了;代码如下: left:0px;top:0px'> 我是固定位置的测试文字 2、通过div+css的布局来实现

@charset "utf-8";.clear {clear:both; height:0 !important; width:0 !important; overflow:hidden; font-size:0;}.top {width:100%; height:150px; background:#0CC;}.bottom {width:100%; height:400px; background:#39C;}.page {width:1200px; margin:20px auto; position:relative;}.left {width:200px; float:left;}.left_in {width:200px; background:#46bc67; border-top:3px solid #000; border-bottom:3px solid #000;}.left_in.on {position:fixed; top:0;}.left_poi {width:100%; height:1px; overflow:hidden;}.right {width:960px; height:2100px; float:right; overflow:hidden; background:#FC3;}

总结

以上所述是小编给大家介绍的css实现网页栏目左侧固定当滚动到底部时自动调整位置 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对真格学网网站的支持!

左边div左浮动设置固定宽度,右边div margin-left设置左边div的宽度值,右边div不需要浮动内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • css实现底部tapbar栏功能
  • css中怎样做一个左边固定,右边响应式随屏幕宽度变化而变化的并列的布局?
  • 如何让CSS导航固定在页面顶端。
  • 如何通过 CSS 实现一个左边固定宽度 右边自适应的两列布局
  • CSS求解???固定在网页上,不随网页滚动而滚动的可以点击控件怎么用CSS实现???如下图
  • 如何用css实现 表格第一列固定 其余内容横向滚动
  • CSS如何实现网页导航栏置顶
  • 能帮我看看这个背景固定,内容滑动的网页基于HTML/CSS怎么实现的,难么?
  • div网页左侧栏滚动固定问题
  • css 固定文字位置
  • html网页顶端工具固定问题css
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程css网页固定滚动css实现底部tapbar栏功能css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css圆角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行缩进两个文字解决css中的匹配问题css实现底部tapbar栏功能用css播放声音的几种技巧方法利用css中的 outline-offset 属性实现加号通过iframe监听一个dom元素大小变化css 实现渐变效果小结( linear-gradient线性渐变 和 r解决type=file 文件修改表单 名称不能正常回显的问题移动端前端适配方案(总结)css 横向进度条和竖向进度条实现代码css运用阿里巴巴矢量库快速在对应位置加上好看的图标
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved