如何在不中断导航栏内容的情况下通过固定导航栏下方的选取框

Question

我已经创建了一个固定的 header 并且我的页面还包含一个 jquery 新闻提要选取框，但两者的区别 b/w 是选取框是可滚动的。现在，当我滚动页面并且选取框从固定 header 的上方出现时，问题就出现了。如果您遇到我的问题，请帮助我。

我试图将此代码绑定到 div 标签下，但它没有帮助我。请尝试解决我的问题并帮助我。请尝试固定 header 并使此代码在固定菜单下可滚动。

<html>
<head>
    <style>
        .card1 {
            justify-content: center;
            width: 85%;
            left: 400px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            height: 200px;
            margin: auto;
            background-color: aliceblue;
            text-align: center;
            font: normal 18px 'Cookie', cursive;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="card1">
        <center style="font-family: cursive; color:red;">
            <h3>Information Counter</h3>
        </center>


        <div align="center" class>
            <div id="marquee0" align="center">
                <script src="https://ajax.cloudflare.com/cdn-cgi/scripts/2448a7bd/cloudflare-static/rocket-loader.min.js" data-cf-nonce="f1a80adeaa41ba9339409f79-"></script>
                <p>
                    <marquee behavior="alternate" onmouseover="this.stop();" onmouseout="this.start();" scrollamount="5" style="text-decoration:none;"><?php $i = 1; 

$custom_query = new WP_Query('cat=8'); 
while($custom_query->have_posts() && $i < 3) : $custom_query->the_post(); ?>
                        <a href="<?php the_permalink() ?>" target=_blank><b>
                                <font size="4"><?php the_title(); ?></font>
                            </b></a> ||
                        <?php $i++; endwhile; ?>
                        <?php wp_reset_postdata();?>
                    </marquee>
                </p>

            </div>
            <div id="marquee0" align="center">
                <script src="https://ajax.cloudflare.com/cdn-cgi/scripts/2448a7bd/cloudflare-static/rocket-loader.min.js" data-cf-nonce="f1a80adeaa41ba9339409f79-"></script>
                <marquee behavior="alternate" onmouseover="this.stop();" onmouseout="this.start();" scrollamount="10">
                    <?php $i = 1; 

$custom_query = new WP_Query('cat=7');
while($custom_query->have_posts() && $i < 4) : $custom_query->the_post(); ?>
                    <a href="<?php the_permalink() ?>" target=_blank><b>
                            <font size="3"><?php the_title(); ?></font>
                        </b></a> ||
                    <?php $i++; endwhile; ?>
                    <?php wp_reset_postdata(); ?>
                </marquee>
            </div>
            <div id="marquee0" align="center">``
                <script src="https://ajax.cloudflare.com/cdn-cgi/scripts/2448a7bd/cloudflare-static/rocket-loader.min.js" data-cf-nonce="f1a80adeaa41ba9339409f79-"></script>
                <marquee behavior="alternate" onmouseover="this.stop();" onmouseout="this.start();" scrollamount="7">
                    <?php $i = 1; 
$custom_query = new WP_Query('cat=6');
while($custom_query->have_posts() && $i < 4) : $custom_query->the_post(); ?>
                    <a href="<?php the_permalink() ?>" target=_blank><b>
                            <font size="3"><?php the_title(); ?></font>
                        </b></a> ||
                    <?php $i++; endwhile; ?>
                    <?php wp_reset_postdata();?>
                </marquee>
            </div>
            <div id="marquee0" align="center">
                <script src="https://ajax.cloudflare.com/cdn-cgi/scripts/2448a7bd/cloudflare-static/rocket-loader.min.js" data-cf-nonce="f1a80adeaa41ba9339409f79-"></script>
                <marquee behavior="alternate" onmouseover="this.stop();" onmouseout="this.start();" scrollamount="12">
                    <?php $i = 1; $custom_query = new WP_Query('cat=9'); while($custom_query->have_posts() && $i < 4) : $custom_query->the_post(); ?>
                    <a href="<?php the_permalink() ?>" target=_blank><b>
                            <font size="3"><?php the_title(); ?></font>
                        </b></a> ||<?php $i++; endwhile; ?>
                    <?php wp_reset_postdata(); ?> </marquee>
            </div>
        </div>

    </div>
</body>
</html>

Answer 1

您的代码存在几个问题。

首先，你不需要在每次想用它的时候都添加jquery link，添加一次就可以使用它，它应该也可以添加在head或body的底部。

其次，element ID 是唯一的，不要对多个元素使用相同的 ID，使用类将相似的元素分组。 Info on classes

第三，你已经为标记添加了样式标签（如果那只是为了这个问题忽略这部分）你最好使用 CSS 并且你还在元素中使用样式标记 <center style="font-family: cursive; color:red;">将您的样式放在不同的地方会使您更难维护和更新它。

..最后

这是您的代码更新，修复了上述问题，每个 post 使用 NOWDOC 到 echo。 Info

<html>
<head>
    <script src="https://ajax.cloudflare.com/cdn-cgi/scripts/2448a7bd/cloudflare-static/rocket-loader.min.js" data-cf-nonce="f1a80adeaa41ba9339409f79-"></script>
    <style>
        .card1 {
            justify-content: center;
            width: 85%;
            left: 400px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            height: 200px;
            margin: auto;
            background-color: aliceblue;
            text-align: center;
            font: normal 18px 'Cookie', cursive;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="card1">

        <center style="font-family: cursive; color:red;">
            <h3>Information Counter</h3>
        </center>

        <div align="center" class>
            <div id="marquee0" align="center">
                <marquee behavior="alternate" onmouseover="this.stop();" onmouseout="this.start();" scrollamount="5" style="text-decoration:none;">
                <?php $i = 1; 
                    $custom_query = new WP_Query('cat=8'); 
                    while($custom_query->have_posts() && $i < 3) : $custom_query->the_post(); 

                        echo <<<DOC
                            <a href="{$custom_query->the_permalink()}" target=_blank><b><font size="4">$custom_query->the_title()</font></b></a> ||
                            $i++;
DOC;
                    endwhile;
                    wp_reset_postdata();
                    ?>
                </marquee>
            </div>
        </div>

    </div>
</body>
</html>```

现在使用此代码查看问题是否仍然存在，如果仍然存在，请更新问题。

如何在不中断导航栏内容的情况下通过固定导航栏下方的选取框

How to pass marquee beneath the fixed navbar without interrupting the navbar content

jquery

html

css

marquee