Question

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

我试图将这段代码绑定在div标签下，但对我没有帮助。请尝试解决我的问题并为我提供帮助。请尝试使用固定的标题，并使此代码在固定菜单下可滚动。

<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链接用于某物时，只需添加一次即可将其用于任何用途，也应将其添加到head中或在body的底部。

第二，element ID是唯一的，不要对多个元素使用相同的ID，请使用类对相似的元素进行分组。 Info on classes

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

..最后

这是您代码的更新，它修复了上述问题，它使用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>```

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

如何在不中断导航栏内容的情况下在固定导航栏下方传递字幕

1 个答案: