javascript - 通过滚动到达导航栏区域时要剪切的元素-6ren

javascript - 通过滚动到达导航栏区域时要剪切的元素

转载作者：行者123 更新时间：2023-12-01 00:09:48

希望有人能帮我解决这个问题。我有一个固定的导航栏，没有背景颜色和特定的高度。现在，当向上/向下滚动时，我希望元素在导航栏边框处被剪切(在图形示例中标记为红色)，因此它们不会显示在导航栏区域中。有 JavaScript 解决方案吗？

这是一个它应该如何表现的图形示例。

感谢您的任何提示。

更新:在 Hijiki Mizukusa 暗示我此解决方案的最终代码如下所示...

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  background: url("Background.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

nav {
  height: 50px;
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  align-items: center;
}

a {
  text-decoration: none;
  color: black;
}

nav div {
  background-color: yellow;
  margin: 0 20px;
  padding: 5px;
}

img {
  height: 300px;
}

section {
  display: flex;
}

#content {
  position:fixed;
  top: 50px;
  overflow: scroll;
  height: calc(100% - 50px);
}

::-webkit-scrollbar {
  width: 0px;
  background: transparent; /* make scrollbar transparent */
}

<body>

  <nav>
    <div><a href="#About">About</a></div>
    <div><a href="#Products">Products</a></div>
    <div><a href="#Shop">Shop</a></div>
    <div><a href="#Carrer">Carrer</a></div>
  </nav>

  <div id="content">
    <section>
      <div>
        <img src="Cat.jpg" alt="Cat">
      </div>
      <div>
        What is Lorem Ipsum?
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

        Why do we use it?
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

        Where can I get some?
        There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
      </div>
    </section>
    <section>
      <div>
        <img src="Cat.jpg" alt="Cat">
      </div>
      <div>
        What is Lorem Ipsum?
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

        Why do we use it?
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

        Where can I get some?
        There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
      </div>
    </section>
    <section>
      <div>
        <img src="Cat.jpg" alt="Cat">
      </div>
      <div>
        What is Lorem Ipsum?
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

        Why do we use it?
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

        Where can I get some?
        There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
      </div>
    </section>
  </div>
    

</body>

使用::-webkit-scrollbar 我还设法隐藏了滚动条。

最佳答案

Javascript 不是必需的，我想 CSS 解决方案更可取。

如果您的导航栏高度在页面运行期间不会变化，您可以将内容的位置设置为固定并使用高度计算(100% - 导航栏高度)，top 作为导航栏高度。

假设您的导航栏高度为 50px:

#navbar, #content{
  position:fixed;
  left: 0;
  background: transparent;
}

#navbar{
  top: 0;
  height: 50px;
  list-style-type: none;
}

#content{
  top: 50px;
  height: calc(100% - 50px);
  overflow: auto;
}

#body{
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  top: 0;
  left: 0;
  background: linear-gradient(45deg, grey, black); 
}

#navbar>li{
  display: inline-block;
  background: yellow;
  margin: 0 15px;
}

<div id="body">
  <ul id="navbar">
     <li>About</li>  
     <li>Products</li> 
     <li>Shop</li> 
     <li>Career</li> 
  </ul>
  <div id="content">
    <p>What is Lorem Ipsum?
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

        Why do we use it?
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).


        Where does it come from?
        Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

        The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

        Where can I get some?
        There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
    </p>
  </div>
</div>

如果您不确定导航栏的高度，可以使用 flex 布局。

#body{
  position: fixed;
  width: 100%;
  height: 100%;
  margin: 0;
  top: 0;
  left: 0;
  background: linear-gradient(45deg, grey, black); 
  display:flex;
  flex-direction: column;
}

#navbar, #content{
  background: transparent;
}

#navbar{
  list-style-type: none;
}

#content{
  flex-grow: 1;
  overflow: auto;
}



#navbar>li{
  display: inline-block;
  background: yellow;
  margin: 0 15px;
}

<div id="body">
  <ul id="navbar">
     <li>About</li>  
     <li>Products</li> 
     <li>Shop</li> 
     <li>Career</li> 
  </ul>
  <div id="content">
    <p>What is Lorem Ipsum?
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

        Why do we use it?
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).


        Where does it come from?
        Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

        The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

        Where can I get some?
        There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
    </p>
  </div>
</div>

关于javascript - 通过滚动到达导航栏区域时要剪切的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60149092/

文章推荐： python - Pandas DateTime 索引重采样不起作用

文章推荐： python - 如何在将数据推送到 MSSQL 之前删除所有特殊字符

文章推荐： python - 将一个元组复制到多个组中

FFMPEG:剪切、添加水印和合并
我有 2 个视频文件(input.mp4，leadout.mp4)和一个图像(watermark.png)。我需要将第一个视频剪切到 54 秒，添加水印，然后将其与第二个视频合并。我实现了这个调用
vba - 剪切、复制和粘贴excel
在 VBA 中，您可以在剪切和粘贴后直接进行复制和粘贴。我之所以问，是因为 for 循环中的 If 语句需要剪切一行数据，然后直接在下面复制该行。当我运行代码时，它会执行该剪切，但不会执行副本。我在网
tinymce 剪切/粘贴插件
我想在剪切/粘贴事件触发后调用函数。例如，当用户通过键盘或鼠标(带有上下文菜单)在编辑器中剪切/粘贴时，我想计算用户输入的字符数。用户执行剪切/粘贴后有什么方法可以调用我们自己的函数吗？最佳答案
bash - 剪切/格式化docker服务命令
抱歉，标题不准确，但实际上我正在尝试简化方法: Docker service ls 变成这个: Docker service ls cutted 尝试使用-f，但不起作用。也许有一些grep / s
r - 剪切/剪切多边形外部的所有内容或用白色填充外部
我有一个带有三角形的彩色噪声正方形。现在，我希望多边形像圣诞节的“ cookies 切割器”一样减少这种噪音。导致被多边形路径包围的三角形噪声。如何裁剪与多边形边框重叠的所有像素，然后将其另存为
prolog - 剪切(!)与返回
我正在 Prolog 中开发一个谓词，它有可能在它结束之前终止。出于这个原因，我正在寻找类似于 return; 的命令。 (C++)。我用了 cut !但我怀疑它的字面意思以及它是否确实做了什么re
java - 剪切 JsonStr
我的代码如下所示: ServiceHandler sh = new ServiceHandler(); // Making a request to url and g
shell脚本中的Linux子串(剪切)输出
在 Linux(Raspbian 发行版)中，我试图提取文件名的日期部分，当我直接将其输入终端时，该文件名有效(见下文)。 $ file1="access_point20140821.csv" $ e
html - 溢出不显示所有内容(剪切)
我正在使用 vuetify，我想制作一个可滚动的 stepper在对话框中。这是一个代码笔 https://codepen.io/anon/pen/OqWQdy 我在 v-stepper-items
javascript - 剪切/重新排列背景居中而不是调整大小
我有一个小测试站点，其中一个 div 的宽度减小到 50%，当我们单击按钮时另一个 div 出现。这是我的 codepen 当您单击该按钮时，图像会调整大小。因为我正在使用:background-si
Linux 剪切、粘贴
我必须编写一个脚本文件来剪切以下列并将其粘贴到新 .arff 文件中同一行的末尾。我想文件类型无关紧要。当前文件: 63,male,typ_angina,145,233,t,left_vent_hy
Android在editText上拦截粘贴\复制\剪切
如何拦截此类事件？当用户尝试将一些文本粘贴到我的 EditText 中时，我需要添加一些逻辑我知道我可以使用 TextWatcher 但这个入口点对我不利，因为我只在粘贴的情况下需要拦截，而不是每次
cocoa - 剪切 NSScrollView 上的圆角
我有一个简单的自定义无边框 NSWindow 子类，它具有圆角矩形形状。在此窗口的内容 View 中，我添加了一个 NSScrollView。如何让 NSScrollView 将其文档 View
java - 剪切 jsoup 接收到的字符串
所以这是我的代码，但是每次尝试剪切字符串“words”都失败了，它只是用 jsoup 收到的整个文本执行 TextView。我只想剪切字符串的前 x 个单词。 public class main e
android - 操作栏选择全部/剪切/复制不显示警报对话框
Action Bar Select All/Cut/Copy not showing for EditText in Alert dialog(picture 2),请帮助编辑:代码是
javascript - 检测右键删除/剪切/复制tinymce
如何检测 tinymce 上的右键单击删除？我通过 onPaste 事件检测到粘贴事件，但我卡在剪切删除和复制上。我知道有 onContextMenu 事件，但似乎没有保存菜单项的函数或变量。有什么
java - 剪切、复制和粘贴为 JMenuItems
我有两个 JTextAreas 并且想要实现剪切、复制和粘贴菜单项。我知道 JTextArea.cut 和其他方法，但无法弄清楚如何确定用户在何处(在哪个 JTextArea 中)选择了文本和/或放置
html - 两侧“剪切”页面
我想在两侧“剪切”我的页面，如下所示: http://i.stack.imgur.com/ngZrp.jpg 演示:https://jsfiddle.net/r2g0eyxf/3/ #left {
css - 通过转换防止 Safari 剪切
我有一个绝对位于另一个元素之上的元素。问题是背景元素有一点 JS 可以根据鼠标的移动在 Y 轴上旋转。不幸的是，我在 Safari 中发现了一个在 Firefox 或 Chrome 中没有出现的问题。
javascript - 当窗口不可见时选择/剪切/粘贴
我正在编写一个脚本，在该脚本中，我采用名片设计并使用它生成一张纸，上面有十张卡片，以匹配打印临时卡片的模板。这里最棘手的部分是出血；它们会在中间重叠，所以我需要为每个都制作剪贴蒙版。我想出了一个系统

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 通过滚动到达导航栏区域时要剪切的元素