我创建了一个固定的标题,并且我的页面还包含一个用于新闻提要的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>
答案 0 :(得分:0)
您的代码有几个问题。
首先,您不需要每次都想将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>```
现在使用此代码查看问题是否仍然存在,如果确实存在,请更新问题。