时间戳

首页 > 解决方案 > 好奇将 html 内容设置为消失或随内容滚动而不覆盖内容

html - 好奇将 html 内容设置为消失或随内容滚动而不覆盖内容

问题描述

编码新手，但想给我的网站留下深刻印象。

当前有一个“在此页面上”HTML 嵌入元素，当用户向下滚动页面时，我希望它消失。

我有左侧的元素，并且知道如何将其设置为固定。但是，这会使其他内容消失在元素后面。所以将 CSS 定位保持在静态，不要介意。

只是好奇如果我想让它随着内容滚动但在一定时间后或当用户通常向下滚动时消失，代码会是什么样子。

<style>
    .sidebar-content
    {
        position:static;
        background-color:#F9F9F9;
        padding:15px;
        text-decoration: none;
        font-weight: 300;
        font-size:20px;
        font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    }

    h2 {font-weight:400px;
    color: #460E72;
    font-size: x-large;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
        } 
    
    a:link {text-decoration:none;
        color:#B6B6BA;
        }
    
    a:visited {text-decoration:none;
        color:#404041;
        }   
    
    a:hover {color:#404041;
        background-color:#eeeeee;
        cursor: pointer;
        }
    
    a:active {text-decoration:none;
        color:#FF6712;}
        
<style> 
        
    .sidebar-content
    {
        top: 0;
        position:fixed;
        width: 256px;
        max-widtH:296px;
        left: - 275px;
        transition:top 0.3s;
    }
    </style>
<div class="sidebar-content">
    <h2>On this Page </h2>
    <hr>
     <a href="https://tnucii.weebly.com/blackboard-login--course-access.html#BlackboardLoginSteps">Blackboard Login Steps</a>
    <br />
    <a href="https://tnucii.weebly.com/blackboard-login--course-access.html#TroubleshootingLoginIssues">Troubleshooting Login Issues</a>
    <br />
    </div>

标签： htmlcss

解决方案

仅使用 css 或 HTML 无法解决此问题。你必须使用js。

用户向下滚动 100 像素后，此代码将使您的对象消失。

$(window).bind('scroll', function() {
 if ($(window).scrollTop() > 100) {
     $('#divID').hide();
 }
 else {
     $('#divID').show();
 }
 });

推荐阅读