使用JavaScript使标题在网页中弹出？
使用JavaScript使标题在网页中弹出？
提问于 2015-07-30 23:16:39
我在做一个网页。代码可以在这里找到：https://jsfiddle.net/saTfR/43/
HTML：
<body>
<img id="map" src="http://www.local-guru.net/img/guru/worldglow.png"
alt="map">
</body>
<div id="sidebar">
<div class="logo">
<img id="logo" src="logo2.png" alt="Logo">
</div>
</html>CSS：
* {font-family: Lucida Console; }
#sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 230px;
height: 100%;
background-color: #CD6A51;
}
</style>我想插入一些文本，这将有一个“弹出”效果之上的地图图像。我怎么能做到呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-07-30 23:42:27
在你的地图上。我想你想要它在你的图像的“中心”，即使你滚动到右边，你仍然希望它停留在那里。
您可以很容易地使用fadeIn方法(jquery)来创建这个方法。
以下是代码：
HTML：
<p class="text">asdfasdfaa</p>
<img id="map" src="http://www.local-guru.net/img/guru/worldglow.png" alt="map"/>
<p class="text">asdfasdfaa</p>
<div id="sidebar">
<div class="logo">
<img id="logo" src="logo2.png" alt="Logo">
</div>CSS：(根据您的需要调整css )
* {font-family: Lucida Console; }
#sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 230px;
height: 100%;
background-color: #CD6A51;
}
.text{
color:white;
z-index:999;
position:fixed;
left:60%;
font-size:25px;
}您在注释中指定的JS弹出效果：
$(".text").hide().fadeIn(2000);这里也是你的标题文本的代码，一旦你滚动下来。当你向上滚动时，它会再次出现。
var mywindow = $(window);
var pos = mywindow.scrollTop();
mywindow.scroll(function() {
if(mywindow.scrollTop() > pos)
{
$('.text').fadeOut();
}
else
{
$('.text').fadeIn();
}
pos = mywindow.scrollTop();
});以下是小提琴(更新)网址：https://jsfiddle.net/eugensunic/saTfR/48/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31735649
复制相关文章
相似问题
腾讯云开发者
