使用JavaScript使背景图像在滚动时始终保持不变(加上其他查询)

Using JavaScript so that background image always stays the same when scrolling (plus other inquiries)

本文关键字：其他 查询 始终保持 背景 JavaScript 图像 滚动 使用      更新时间：2023-09-26

我正在制作一个网页。代码可以在这里找到:https://jsfiddle.net/saTfR/50/

我想在左边插入一个菜单，向下滚动到网页的不同部分，我以后会添加。我希望背景地图图像在滚动时始终保持在相同的位置。我想在菜单中做一个名为"投资组合"的部分，它将向下滚动到我将插入的不同PNG图像。我希望用户能够点击PNG图像，并打开一个新的选项卡，以便用户可以更好地看到图像。

我还希望我的logo.png图像显示在页面的右上角，并在用户上下滚动时可见。(该标志目前无法在链接中显示，因为它保存在我的计算机中)。

HTML: 

 <p class="text">text</p>        
<img id="map" src="http://www.local-guru.net/img/guru/worldglow.png" alt="map"/>
<p class="text">text</p>      

<div class="logo">
    <img id="logo" src="logo2.png" alt="Logo">
</div>
</html>
CSS: 

* {font-family: Lucida Console; }
.text{
    color:white;
    z-index:999;
    position:fixed;
    bottom: 10px;
    right: 5px;
    left:60%;
    font-size:25px;}
</style>
JavaScript: 

$(".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();
 });

您可以轻松地将您的图像应用为背景图像并修复它。

CSS例子:

body {
   background-image: url('your_image.jpg');
   background-attachment: fixed;
}

它将保持固定，但页面内容将像正常一样在背景图像上方滚动。

要将徽标放在右上角并使其停留，您需要给它一个position: fixed并将其放置在角落(使用html或css中的top/left/margin)。你可能还想给它一个更高的z-index，以确保它保持在顶部。我想提供代码示例，但我现在在我的手机上。

既然我回来了，这里有一些示例代码让你开始。

#logo {
    position: fixed; 
    right: 0; 
    top: 0; 
    z-index: 10;
}

请参见@Mischback对CSS background-image的回答

请参阅非常有用的fancyBox.js实用程序，关于您的图像查询。

fancyBox jQuery插件使图像操作和查看超级容易。

我会让别人回答如何固定/锁定一个标志到屏幕的顶部时滚动。

我同意Mischback的观点，但我实际上会把图像放在它自己的位置，而不是body中。

HTML 

<div id="image"></div>
CSS 

#image {
     background-image: url('image.jpg');
     background-attachment: fixed;
 }
相关文章：