无感五 2018-01-31 11:00 采纳率: 50%
浏览 1641
已采纳

请问如何使用HTML5+CSS3实现粘性导航栏效果,不通过JS

请问如何使用HTML加CCS实现下面这个功能呢

 <script src="jquery-1.11.1.min.js"></script>
<div  style="height:1900px;background:#FC0;margin-top:40px;position:relative;">
    <ul id="napppv" class="yungf">
        <li>导航栏项目一</li>
        <li>导航栏项目二</li>
        <li>导航栏项目三</li>
        <li>导航栏项目四</li>
        <li>导航栏项目五</li>
    </ul>

</div>

<script>
$(function(){
    var a = $('#napppv'),
        b =a.offset();
    $(document).on('scroll',function(){
        var c = $(document).scrollTop();
        if(b.top<=c){
            a.css({'position':'fixed','top':'0px'})
            }else{
                a.css({'position':'absolute','top':'300px'})
                }
        })
    })
</script>
  • 写回答

1条回答 默认 最新

  • devmiao 2018-01-31 15:39
    关注
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 PointNet++的onnx模型只能使用一次
  • ¥20 西南科技大学数字信号处理
  • ¥15 有两个非常“自以为是”烦人的问题急期待大家解决!
  • ¥30 STM32 INMP441无法读取数据
  • ¥15 R语言绘制密度图,一个密度曲线内fill不同颜色如何实现
  • ¥100 求汇川机器人IRCB300控制器和示教器同版本升级固件文件升级包
  • ¥15 用visualstudio2022创建vue项目后无法启动
  • ¥15 x趋于0时tanx-sinx极限可以拆开算吗
  • ¥500 把面具戴到人脸上,请大家贡献智慧,别用大模型回答,大模型的答案没啥用
  • ¥15 任意一个散点图自己下载其js脚本文件并做成独立的案例页面,不要作在线的,要离线状态。