Question

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

我想在左侧插入一个菜单，它会向下滚动到我稍后添加的网页的不同部分。我希望滚动时背景地图图像始终保持在相同的位置。我想在名为“Portfolio”的菜单中创建一个部分，它将向下滚动到我将插入的不同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();
 });

Answer 1

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

示例CSS：

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

它将保持固定状态，但页面的内容将像正常的一样滚动那个背景图片。

Answer 2

要将徽标放在右上角并使其保持不变，您需要将其标记为position: fixed并将其放置在角落中（使用html或顶部/左侧/边距在css中）。您可能还想给它一个更高的z-index以确保它保持最佳状态。我会提供代码示例，但我现在就在我的手机上。

现在我回来了，这里有一些示例代码可以帮助您入门。

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

Answer 3

请参阅@ Mischback的CSS background-image答案。

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

fancyBox jQuery插件可以进行图像处理和查看Super Easy。

滚动时，我会让其他人知道如何将徽标修复/锁定到屏幕顶部。

Answer 4

我同意Mischback，但实际上我会把图像放在自己的身上而不是身体上。

HTML

initial.df$cycle <- cumsum(c(TRUE,diff(cut(initial.df$dtime, 
                            breaks='1 hour', labels=FALSE))>1))

CSS

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

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

4 个答案: