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

Question

I have created a fixed header and also my page contains a jquery marquee for news feeds but the difference b/w both is that the marquee is scrollable. 我创建了一个固定的标题，并且我的页面还包含一个用于新闻提要的jquery选框，但两者的区别是该选框是可滚动的。 Now the problem arises here when I scroll the page and the marquee goes from the upside of the fixed header. 现在，当我滚动页面并且选取框从固定标题的上方移出时，就会出现问题。 Please Help me if You got my problem. 如果您遇到我的问题，请帮助我。

I tried to bound this code under the div tag but it didn't help me. 我试图将此代码绑定在div标签下，但对我没有帮助。 please try and resolve my problem and help me. 请尝试解决我的问题并为我提供帮助。 try a fixed header and make this code scrollable beneath fixed menu, please. 请尝试使用固定的标题，并使此代码在固定菜单下可滚动。

<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

There are several issues with your code. 您的代码有几个问题。

Firstly, you don't need to add the jquery link each time you wish to use it for something, adding it once will make it available to any use of it, it should also be added in the head or at the bottom of the body . 首先，你不需要每次要使用它的东西时添加jQuery的链接，增加一次将其提供给任何使用它，它也应该在添加head或在底部body 。

Secondly, element IDs are meant to be unique, don't use the same ID for multiple elements, Use classes to group similar elements. 其次， element ID是唯一的，不要对多个元素使用相同的ID，而是使用类对相似的元素进行分组。 Info on classes 班级信息

Thirdly, you have added style tags for the markup (if that was just for this question ignore this part) you are better off using CSS and you also use style markup within elements <center style="font-family: cursive; color:red;"> have your styling in different places will make it harder for you to maintain and update it. 第三，您已经为标记添加了样式标签（如果只是为了这个问题，请忽略此部分），您最好使用CSS，并且还可以在元素<center style="font-family: cursive; color:red;">将样式放在不同的位置将使您难以维护和更新它。

..and Finally ..最后

here is an update of your code that fixes the issues outlined above, it uses NOWDOC to echo out each 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>```

Now with this code see if the issue persists and if it does please update the question. 现在，使用此代码查看问题是否仍然存在，如果仍然存在，请更新问题。

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

问题描述

1 个解决方案

解决方案1
0 2019-09-12 11:45:56

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

问题描述

1 个解决方案

解决方案1 0 2019-09-12 11:45:56

解决方案1
0 2019-09-12 11:45:56