qq_40619811 2022-06-11 21:13 采纳率: 89.8%
浏览 51
已结题

div无法固定，怎么办？

我最近正在做一个html（带thymeleaf）。代码如下。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:border="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">

        * {
            padding: 0;
            margin: 0;
        }

        .left i {
            display: block;
            margin-top: 10px;
            margin-left: 20px;
            width: 30px;
            height: 30px;
            background: no-repeat;
            background-size: 30px 30px;
        }
        .right i {
            display: block;
            margin-top: 10px;
            margin-right: 20px;
            width: 30px;
            height: 30px;
            background: no-repeat;
            background-size: 30px 30px;
        }

        .span1{
            font-size: 17px;
            font-family: 微软雅黑;
            font-weight: bold;
            color: white;
            margin-left: 25px;
        }

        .span2{
            color: black;
            font-size: 13px;
            background-color: yellow;
            margin-left: 25px;
            padding: 2px;
        }

        .span3{
            color: black;
            font-size: 13px;
            background-color: yellow;
            padding: 2px;
        }

        .span4{
            color:yellow;
            background-color: gray;
            font-size: 13px;
            padding: 2px;
        }

        .span5{
            color:yellow;
            background-color: gray;
            font-size: 13px;
            padding: 2px;
        }
        .span6{
            color:gray;
            font-size: 14px;
            padding-top: 1px;
            margin-left: 25px;
        }
        .span7{
            font-size: 16px;
            color: white;
            font-family: 微软雅黑;
            font-weight: bold;
            float:right;
            padding-right: 18px;
        }

        ul li,ol li {
            list-style: none;
        }
        .list li {
            float: left;
            margin-right: 10px;
            width: 10px;
            height: 10px;
            border-radius: 10px;
            background-color: rgba(0,0,0,0.5);
            cursor: pointer;
        }
        .list .current {
            background-color: #fff;
        }
        .picture li {
            position: absolute;
            width: 100%;
            height: 150px;
        }
        img {
            width: 100%;
            height: 100%;
        }
        #cn{
           list-style-type: none;
            line-height: 36px;
            background-color: black;
            text-align: center;
            width: 100%;
        }
        .cn1{
            display: inline;
        }
        .cn1 a{
            text-decoration: none;
            color:white;
            font-size: 15px;
            margin: 0;
            padding: 9px 7%;
            word-spacing: 4px;
        }
        .menu {
            display: block;
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 50px;
            color: #000000;
            padding-top: 5px;
            border-top: 1px solid #000000;
            background-color: #000000;
        }

        .subMenu {
            width: 20%;
            cursor: pointer;
            margin:0 auto;
            text-align: center;
        }

        .menu_name {
            height: 12px;
            color: white;
            font-size: 12px;
            margin-top: 8px;
            width: 100%;
            line-height: 12px;
        }

        img.menu_img {
            height: 18px;
            width: 18px;
        }

        img {
            vertical-align: middle;
            border: 0;
        }

        #cp{
            background-color: black;
        }

        #cqa{
           background-color: black;
            line-height: 24px;
            padding-bottom: 17px;
            padding-top: 17px;
        }

        #cq{
            background-color: black;
        }

        .active {
            color: #FFA129;
        }

        .text-center {
            text-align: center
        }
        .jd-banner {
            position: relative;
            overflow: hidden;
            height: 150px;
            width: 100%;
        }
        .jd-banner .previousBtn {
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: rgba(210, 210, 210, 0.4);
            border-radius: 50%;
            transform: translateY(-50%);
            top: 50%;
            left: 12px;
        }
        .jd-banner .previousBtn span {
            position: absolute;
            left: 10px;
            top: 10px;
            width: 20px;
            height: 20px;
            background-position: -22px 0px;
        }
        .jd-banner .previousBtn:hover {
            border: 1px solid #fff;
            background-color: transparent;
        }
        .jd-banner .nextBtn {
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: rgba(210, 210, 210, 0.4);
            border-radius: 50%;
            transform: translateY(-50%);
            top: 50%;
            right: 12px;
        }
        .jd-banner .nextBtn span {
            position: absolute;
            left: 10px;
            top: 10px;
            width: 20px;
            height: 20px;
            background-position: -22px 0px;
            transform: scaleX(-1);/*镜像*/
        }
        .jd-banner .nextBtn:hover {
            border: 1px solid #fff;
            background-color: transparent;
        }
        .jd-banner ul {
            width: 1000%;
            -webkit-transform: translateX(-10%);
            transform: translateX(-10%);
        }
        .jd-banner ul li {
            width: 10%;
            float: left;
        }
        .jd-banner ul li img {
            width: 100%;
            height: 150px;
        }
        .jd-banner ol {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 10px;
        }
        .jd-banner ol li {
            float: left;
            width: 8px;
            height: 8px;
            border-radius: 8px;
            border: 1px solid #ff0000;
            margin: 0 4px;
        }
        .jd-banner ol .current {
            background-color: #ff0000;
        }
    </style>
</head>
<body style="background-color: black">
<div class="main" id="main" style="background-color: black">
    <!-- 轮播图 -->
    <div class="jd-banner">
        <ul class="clearfix">
            <li><a href="#"><img src="./images/li4.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/li1.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/li2.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/li3.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/li4.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/li1.jpg" alt=""></a></li>
        </ul>
        <div class="previousBtn">
            <!--jd-sprites：添加的精灵图图标，可自行添加箭头-->
            <span class="jd-sprites"></span>
        </div>
        <div class="nextBtn">
            <span class="jd-sprites"></span>
        </div>
        <!--轮播点-->
        <ol>
            <li class="current"></li>
            <li > </li>
            <li ></li>
            <li ></li>
        </ol>
    </div>
    <script type="text/javascript">
        ; (function bannerToggle() {
            var banner = document.querySelector('.jd-banner')
            var ul = banner.querySelector('.jd-banner ul'); //获取ul
            var olLis = document.querySelectorAll('.jd-banner ol li')//获取小圆点
            var previousBtn = document.querySelector('.previousBtn')
            var nextBtn = document.querySelector('.nextBtn')

            var length = ul.children.length
            // 前面有张假图片，因此index=1
            var index = 1
            var width = banner.offsetWidth

            nextBtn.onclick = function () {
                nextImg()
            }
            previousBtn.onclick = function () {
                previousImg()
            }
            /* 切换到下一张图 */
            function nextImg() {
                index++
                addAnimation()
                moveImg(-index * width)
            }
            /* 切换到上一张图 */
            function previousImg() {
                index--
                addAnimation()
                moveImg(-index * width)
            }
            /*transitionend事件：过渡完成后触发 */
            ul.addEventListener('transitionend', function () {
                // 往左跑的判断, 当抵达最后一张假图时, 需要瞬间跳到第一张真图的位置
                if (index >= length - 1) {
                    index = 1
                    removeAnimation()
                    moveImg(-index * width)
                }
                // 往右跑的判断, 当抵达第一张假图的时候, 应该瞬间跳转到最后一张真图(图8的位置)
                if (index <= 0) {
                    index = length - 2
                    removeAnimation()
                    moveImg(-index * width)
                }
                location()
            })

            /**封装的一些小方法 */
            /*排他思维,添加小圆点*/
            function location() {
                olLis.forEach(function (item, index) {
                    item.classList.remove('current')
                })
                olLis[index - 1].classList.add('current')
            }
            /*图片移动 */
            function moveImg(x) {
                ul.style.transform = 'translateX(' + x + 'px)'
            }
            /*移除动画 */
            function removeAnimation() {
                ul.style.transition = 'none'//移除过渡
            }
            /*添加动画 */
            function addAnimation() {
                ul.style.transition = 'all .4s'//添加过渡
            }
            /*自动播放 */
            var timerId = null
            function autoPlay() {
                timerId = setInterval(nextImg, 3000)
            }
            autoPlay()
            /*鼠标移入停止播放 */
            banner.onmouseenter = function () {
                clearInterval(timerId)
            }
            /*鼠标移出开始播放 */
            banner.onmouseleave = function () {
                autoPlay()
            }


            // 如果屏幕大小变换了, width 需要动态更新
            // resize: 屏幕大小改变时触发
            window.addEventListener("resize", function () {
                // 重新获取 li 的宽度即可
                width = banner.offsetWidth;
            })
        })()
    </script>
<div id="cn">
    <li class="cn1"><a>数字藏品</a></li>
    <li class="cn1"><a>发售计划</a></li>
    <li class="cn1"><a>积分空投</a></li>
</div>
<a href="./li1.html">
    <div id="co" style="overflow:hidden;background-color: black">
    <div id="cp" th:each="cangpin,cangpinStat:${cangpinlist}">
        <div id="cq" width="80%" height="auto">
        <img th:src="'/images/'+${cangpin.path2}">
        </div>
        <div id="cqa">
        <nobr class="span1" th:text="${cangpin.cangpinname}"></nobr><br>
        <nobr class="span2" th:text="${cangpin.type2}"></nobr>
        <nobr class="span3">限量</nobr>
        <nobr class="span4" th:text="${cangpin.totalnum}"></nobr>
        <nobr class="span5" th:text="'  '+${cangpin.sys}"></nobr><br>
        <nobr class="span6" th:text="'  '+${cangpin.company}"></nobr>
        <nobr class="span7"  th:text="'  ￥'+${cangpin.xianjia}"></nobr>
        </div>
    </div>
</div>
</a>
    <div id="cr" style="height:100px;background-color:black;text-align: center;color: white;font-size: 16px;font-weight: bold;
font-family: 华文琥珀;margin-top: 10px;margin-bottom: 30px">-更多内容敬请期待-</div>
</div>
<script>
    $(document).ready(function() {
        //添加图片
        $("div .subMenu>img").each(function() {
            var name = $(this).attr("data-imgname");
            var src = "http://www.jq22.com/img/cs/500x300-" + name + ".png"
            //设置img的属性和值。
            $(this).attr("src", src);
        });

        //点击事件
        $("div .subMenu").click(function() {
            // 取消当前激活状态
            var $img = $(".active>img");
            //返回被选元素的属性值
            var name = $img.attr("data-imgname");
            var src = "http://www.jq22.com/img/cs/500x300-" + name + ".png";
            $img.attr("src", src);
            $(".active").removeClass("active");

            // 添加新状态
            $(this).addClass("active");
            //找到所有 div(subMenu) 的子元素(img)
            $img = $(this).children("img");
            name = $img.attr("data-imgname");
            src = "http://www.jq22.com/img/cs/500x300-" + name + ".png";
            //设置img的属性和值。
            $img.attr("src", src);

            //content根据点击按钮加载不同的html
            var page = $(this).attr("data-src");
            if (page) {
                $("#content").load("../html/" + page)
            }
        });

        // 自动点击第一个菜单
        $("div .subMenu")[0].click();
    });

    /*content高度*/
    function initSize() {
        var height = $(window).height() - $("header").height() - $("#description").height() - $("#menu").height();
        $("#content").height(height + "px");
    }
</script>
<div id="menu" class="menu">
    <div id="one" class="subMenu text-center"  style="position: fixed;left: 8%">
        <img class="menu_img" src="/images/home.png" width="18px" height="18px">
        <div class="menu_name">首页</div>
    </div>
    <div id="two" class="subMenu text-center" style="position: fixed;left: 41%">
        <img class="menu_img" src="/images/cube.png" width="18px" height="18px">
        <div class="menu_name">藏品</div>
    </div>
    <div id="three" class="subMenu text-center" style="position: fixed;left: 74%">
        <img class="menu_img" src="/images/person.png" width="18px" height="18px">
        <div class="menu_name">我的</div>
    </div>
</div>
<script type="text/javascript">
    var screen=window.outerHeight;
    var msg2 = document.getElementById("menu");
    var msg = document.getElementById("main");
    var msg3=document.getElementById("cr");
    msg.style.height = screen+msg2.offsetHeight+msg3.offsetHeight+'px';
</script>
<script type="text/javascript">
    ;(function scroll() {
        var a = document.getElementById("cn");
        var b = document.querySelector('.jd-banner')[0];
        var c = a.scrollTop;
        var d = b.offsetHeight;
        console.log(c+"#"+d)
        if (c <= d) {
            a.style.position = 'static';
        }
        if (c > d) {
            a.style.position = 'fixed';
        }
    })();
</script>
</body>
</html>

问题有两个
1、最后一个js代码不能执行，无论我是通过console.log打在控制台，还是alert，都不显示。而且不是我要的效果，无论怎么样，名为cn的div总是随滚动条滚动，不会固定。
2、轮播的banner（就是jd-banner的div），在chrome出现了显示错误，但是在IE上是正常的。为什么。
我要的效果
1、如果滚动条的垂直位置小于等于轮播banner的高度（就是jd-banner的div），名为cn的div（也就是菜单栏）随滚动条滚动
2、如果滚动条的垂直位置大于轮播图banner的高度（就是jd-banner的div），名为cn的div（也就是菜单栏）固定在网页的顶端。
怎么办呢？

  • 写回答

5条回答 默认 最新

  • 天际的海浪 2022-06-11 22:09
    关注

    你function scroll()函数只是初始时执行一次
    要滚动条滚动时执行应该绑定onscroll事件

    window.onscroll=function() {
    var a = document.getElementById("cn");
    var b = document.querySelector('.jd-banner')[0];
    var c = a.scrollTop;
    var d = b.offsetHeight;
    console.log(c+"#"+d)
    if (c <= d) {
        a.style.position = 'static';
    }
    if (c > d) {
        a.style.position = 'fixed';
    }
};
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题？

问题事件

  • 系统已结题 6月20日
  • 已采纳回答 6月12日
  • 创建了问题 6月11日

悬赏问题

  • ¥15 有赏，i卡绘世画不出
  • ¥15 如何用stata画出文献中常见的安慰剂检验图
  • ¥15 c语言链表结构体数据插入
  • ¥40 使用MATLAB解答线性代数问题
  • ¥15 COCOS的问题COCOS的问题
  • ¥15 FPGA-SRIO初始化失败
  • ¥15 MapReduce实现倒排索引失败
  • ¥15 ZABBIX6.0L连接数据库报错，如何解决？(操作系统-centos)
  • ¥15 找一位技术过硬的游戏pj程序员
  • ¥15 matlab生成电测深三层曲线模型代码