我已经创建了一个固定的标题，而且我的页面还包含一个用于新闻提要的 jquery 选取框，但两者的区别在于选取框是可滚动的。现在，当我滚动页面并且选取框从固定标题的上方出现时，问题就出现了。如果您遇到我的问题，请帮助我。
我试图将此代码绑定(bind)到 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>
最佳答案
您的代码有几个问题。
首先，您不需要每次都添加 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>```
现在使用此代码查看问题是否仍然存在，如果仍然存在，请更新问题。
关于jquery - 如何在不中断导航栏内容的情况下通过固定导航栏下方的选取框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57905534/