我对我的剧本有疑问。我创建了一个脚本，当我们在其中一个页面上向下滚动时，我们可以使标题保持在用户窗口的顶部。它执行此操作5秒钟，然后返回到页面顶部的原始空间。只有一个问题，目前标题从其他内容开始，但在正确的位置结束。这里有人知道如何解决这个问题吗？我认为我的问题是，当有人向下滚动并且倒计时仍然高于零时，我需要修复标题。只要其中一个条件被填充而没有另一个条件，标题仍然需要是静态的。有人知道如何做到这一点。我的代码目前的结果是： http://scripts.semilo.com/mitchel/TEST_v14_multisize_LS.html
代码本身：
<html>
<head>
<style>
/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}body { line-height: 1;}ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}table { border-collapse: collapse; border-spacing: 0;}
header {
position: fixed;
text-align: center;
font-size: 16px;
line-height: 30px;
height: auto;
width: 100%;
padding-bottom: 20px;
background: #335C7D;
color: #a3ff00;
font-family: 'PT Sans', sans-serif;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
</style>
</head>
<body>
<header id="myHeader">
<h1>
<div>
<script src='https://www.googletagservices.com/tag/js/gpt.js'>
googletag.pubads().definePassback('/4217/semilo.smulweb.nl', [[728, 90], [970, 250]]).setTargeting('campaign', [2017654321]).display();
</script>
</div>
<div id="teller"; style="position:static; height:20px; width:100%; text-align:center; font-size: 14px; color:#a3ff00; font-style: sansita"> Deze ad verdwijnt in <span id="countdowntimer">5 </span> Seconden</div>
<script type="text/javascript">
var timeleft = 5;
var myHeader = document.getElementById('myHeader');
var downloadTimer = setInterval(function(){
timeleft--;
document.getElementById("countdowntimer").textContent = timeleft;
if(timeleft <= 0){
myHeader.style.position = "static";
clearInterval(downloadTimer);
teller.style.display = "none";
}
},1000);
</script>
</h1>
</header>
<img src="http://scripts.semilo.com/mitchel/Weersverwachting.png" width="auto" height="auto" />
</body>
</html>
答案 0 :(得分：0)
查看以下代码：
import pandas as pd
url = "https://raw.github.com/pandas-dev/pandas/master/pandas/tests/data/tips.csv"
df = pd.read_csv(url)
df["date"] = list(range(42005, 42005+len(df)))
答案 1 :(得分：0)
这可能有点长，但它可以解决问题，从中选择你需要的东西（我认为你的问题实际上只与它的CSS部分有关）。
横幅在前5秒内是粘性的，所以如果你滚动它，它会随你一起滑动，然后向上滑动。
如果你已经在顶部，那么滑动动画就不会发生。
计时器文字也会消失。
希望这是有帮助的
function Countdown(options) {
var timer,
instance = this,
seconds = options.seconds || 10,
updateStatus = options.onUpdateStatus || function() {},
counterEnd = options.onCounterEnd || function() {};
function decrementCounter() {
updateStatus(seconds);
if (seconds === 0) {
counterEnd();
instance.stop();
}
seconds--;
}
this.start = function() {
clearInterval(timer);
timer = 0;
seconds = options.seconds;
timer = setInterval(decrementCounter, 1000);
};
this.stop = function() {
clearInterval(timer);
};
}
var myCounter = new Countdown({
seconds: 5, // number of seconds to count down
onUpdateStatus: function(sec) {
$("#timer>span").html(sec);
}, // callback for each second
onCounterEnd: function() {
if ($("body").scrollTop() > 0) {
$(".banner").slideUp("fast", function() {
$(".banner").removeClass("banner_sticky");
$("#content").addClass("content_sticky");
$("#timer").hide();
$(".banner").slideDown("fast");
});
} else {
$(".banner").removeClass("banner_sticky");
$("#content").addClass("content_sticky");
$("#timer").fadeOut("fast");
}
} // final action
});
myCounter.start();.banner {
height: 50px;
width: 100%;
background: green;
position: absolute;
z-index: 1;
}
.banner_sticky {
position: fixed!important;
}
.content {
height: 5000px;
width: 100%;
background: lightgrey;
position: relative;
top: 60px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="banner banner_sticky">
<p id="timer">This banner will go to the top in <span>5</span></p>
</div>
<div class="content"><img src="http://scripts.semilo.com/mitchel/Weersverwachting.png" width="auto" height="auto"></div>
答案 2 :(得分：0)
好的，我对此有了更好的了解，并认为我得到了答案。
我将页面正文包裹在
中<div id="content">
<img src="http://scripts.semilo.com/mitchel/Weersverwachting.png" width="auto" height="auto" />
</div>
的Javascript
var downloadTimer = setInterval(function() {
timeleft--;
document.getElementById("countdowntimer").textContent = timeleft;
if (timeleft <= 0) {
myHeader.style.position = "static";
content.style.top = "0px";
clearInterval(downloadTimer);
teller.style.display = "none";
}
CSS
header {
position: fixed;
text-align: center;
font-size: 16px;
line-height: 30px;
height: auto;
width: 100%;
padding-bottom: 20px;
background: #335C7D;
color: #a3ff00;
font-family: 'PT Sans', sans-serif;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
z-index:10;
}
#content {
position: relative;
}