位置:固定导航不会保持固定

2024-07-01

我正在开发的网站遇到了很多问题。甚至下载到缓慢的页面加载等等。但我遇到的最大问题是固定位置元素的行为。

首先,导航应该始终保持固定,但事实并非如此。但是,如果您在滚动时重新加载,它确实会出现在页面中间。很奇怪。

直播网站在这里 http://www.francesca-designed.me/smm/

其次,背景应该保持固定,但事实并非如此。

Nav code

<div class="navwrapper">
    <nav id="top">
        <div class="wrapper">
            <ul>
                <li><a href="#project" class="scroll">The Project</a></li>
                <li><a href="#makers" class="scroll">The Makers</a></li>
                <li><a href="#markets" class="scroll">The Markets</a></li>
                <li><a href="#workshops" class="scroll">The Workshops</a></li>
                <li><a href="#shop" class="scroll">The Shop</a></li>
                <li><a href="#getinvolved" class="scroll">Get involved</a></li>
            </ul>
    </div></nav>
    <span class="navshadow"></span>
</div>

CSS

.navwrapper{position:fixed;width: 100%;top: 0;}

Chrome 中存在一个位置固定和变换的错误:

https://code.google.com/p/chromium/issues/detail?id=20574 https://code.google.com/p/chromium/issues/detail?id=20574

所以你必须从中删除变换.label.

也可以看看:

固定位置不适用于标题 https://stackoverflow.com/questions/14732403/position-fixed-not-working-for-header

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

位置:固定导航不会保持固定 的相关文章

  • 为什么我的 css 在 IE9 中无法正确显示?

    几个小时前 我对我的 WordPress 主页做了一个小改动 现在 IE9 中出现了一些以前不存在的随机奇怪 CSS 问题 我曾使用 IE 的开发工具来尝试找出问题所在 但该工具与 firebug 相比实在是太糟糕了 而且问题只出现在 IE
  • 使用 HTML 标签作为背景图像而不是 CSS background-image 属性?

    我需要使用 html img 标签作为背景图像 div 然后我将放置一个 p 的内容 我已经尝试过 但似乎无法让它们正确显示 我使用了相对位置 负值的边距 任何建议或指出我正确的方向将不胜感激 p div img src http www
  • 删除古腾堡 CSS

    我在 WordPress v4 9 8 中安装了 Gutenberg 插件 并尝试删除它附带的 CSS 以便我可以提供自己的 CSS 这是包含在内的表 我已经尝试过以下方法 add action wp print styles wps de
  • 在 css 中设置父元素和子元素的样式[重复]

    这个问题在这里已经有答案了 我有以下结构 a href class brand logo img src static images logo wpc sm png alt WPC Logo class wpc logo a 我有以下 cs
  • 图表js y轴不同背景

    我在图表js中有一个折线图 我想在 y 轴上给它不同的背景 比如 0 40 是红色 40 70 是黄色 70 100 是绿色 y 轴的限制始终为 100 var scatterChart new Chart ctx type line da
  • AA 级辅助功能 - 使用文本阴影增强颜色对比度

    我有一个网站 正在根据 WCAG 2 0 AA 级合规性进行编码 但其中一个按钮的颜色对比度未通过 背景 D57405 前景 FFF 是否可以使用文本阴影来增强对比度 这会被视为通过吗 我可以为不支持文本阴影的浏览器提供不同的颜色 但我想尝
  • Ionic2 圆形分段按钮

    有谁知道如何将分段按钮的 css 从方形更改为圆形 我尝试使用正常css http codeitdown com css round buttons 但当 ionic2 尝试将按钮转换为打开时 情况变得很奇怪segment activate
  • CSS 网格具有不等高和宽的列

    我有 5 个盒子 三个在第一行 接下来的两个在第二行 I want all the boxes but the second to be of equal height and the 5th box to go right under t
  • Bootstrap 导航栏不会切换

    我对使用 Bootstrap 相当陌生 并且希望你们中的一位专业人士能够向我展示我在哪里犯了错误 我想要实现的目标 我正在使用 Bootstrap 开发一个响应式网站 我希望我的导航栏固定在顶部 并且当网页缩小到移动尺寸时 我希望我的导航栏
  • 基于父 div 的 CSS 优先级

    如果您在浏览器中查看以下代码 该链接将显示为红色 我希望它是绿色的 因为辅助 div 嵌套在主 div 内 看起来颜色是由 css 文件中元素的顺序决定的 如果我在 primary 之后移动 secondary 则链接为绿色
  • 为什么我的 HTML 不使用 CSS 中定义的最后一个样式?

    我有以下按此顺序编写的 CSS h2 last child p last child ul last child margin bottom 0 content message margin 20px 1 667em 1 667em 1 6
  • 输入宽度与文本区域宽度

    读完主题后输入尺寸与宽度 https stackoverflow com questions 1480588 input size vs width 我很清楚我们不应该使用 size 属性而应该使用 css 样式 输入 文本 和文本区域显示
  • 不可能的? HTML 鼠标悬停边框颜色随边框折叠而变化?

    我希望有一个表格 其中所有边框 内部 外部 的宽度都是单个像素 我通过设置来实现这一点border collapse桌子上的风格 那么我希望onmouseover每个 TD 单元 改变border color为不同的颜色 如果表格边框尚未折
  • 使用查询字符串使缓存失效,这是不好的做法吗?

    在我制作的网站上 我通常使用查询字符串参数使 CSS 和 JS 的缓存无效 如下所示 注意 这是 chrome 检查器的屏幕截图 这些查询字符串都是由我在渲染到浏览器中时制作的小系统自动附加的 一位朋友现在告诉我 使用查询字符串的缓存效果不
  • 为什么我的 OpenLayers 3 地图未在 Internet Explorer 11 中显示?

    I am trying to serve up a map in Internet Explorer that works fine in Firefox or Chrome While debugging I noticed that s
  • 引导崩溃仅切换一次

    我再次在这里拉扯我的头发 所以我已经使用 jsFiddle 进行了引导崩溃 http jsfiddle net rasreye xtPtH 1 http jsfiddle net rasreye xtPtH 1 但是当我添加到我的网站时 它
  • 如何移动 Web 浏览器滚动条并设置其样式 (CSS)?

    在访问我当前正在处理的网站时 您会立即注意到这样一个事实 当您滚动浏览博客文章时 浏览器顶部的一个栏会跟随您向下移动 我想知道是否有任何方法可以用来将滚动条移动到滚动条下方而不是旁边 然后设置滚动条的样式以适应网站的风格 Image 您可以
  • 如何防止图像溢出圆角框?

    如果我使用此代码 图像不会被 div 的圆角剪切 导致图像的方角覆盖 div 的圆角 div img src big image jpg div 有谁知道如何获得圆角 div 来防止子图像溢出 我最新的 Chrome Firefox 和 S
  • 媒体查询和 Bootstrap 有什么区别? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 奇怪的是 CSS3 媒体查询和 Bootstrap 之间的区别是什么 我访问过很多网站 但每个人都说 两者都是为了网站的响应能力 如果
  • React JS:可折叠侧边栏

    我正在使用 React JS 创建响应式 UI 我想创建一个可折叠的侧边栏 如下所示 因此 当我单击垂直条 图形信息 时 它应该像第二张图片一样展开 我见过一些例子 比如Jsfiddle示例代码 https jsfiddle net 4q8

随机推荐

  • Android升级现有应用程序

    我试图通过更改清单文件中的以下内容来升级现有应用程序 更改自 android versionCode 1 android versionName 1 0 To android versionCode 2 android versionNam
  • React“无法对‘MediaRecorder’执行‘停止’:MediaRecorder 的状态为‘非活动’。”

    我想用ReactJS写一个小型录音网站 但我总是收到这个错误 Failed to execute stop on MediaRecorder The MediaRecorder s state is inactive 这是我编写的代码的一部
  • Hamcrest - 使用什么版本? 1.3或2

    我很困惑 目前我正在使用测试我的 spring 应用程序
  • 根据需要更改图像叠加

    我需要你的帮助 我使用以下命令直播到 Twitch ffmpeg i input mp4 i image jpg filter complex overlay x 10 x 10 s 1920x1200 framerate 15 c v l
  • 在 Firebase 数据库中保存 LocalDate (Java.time) 对象

    我有一堂课 比如说Class A 其中有一个字段LocalDate localDate Java time 我考虑过使用LocalDate因为我想保存 日期 而不保存 时间 我想将此类 A 的对象保存到 firebase 数据库中 作为Lo
  • Antlr4如何构建允许关键字作为标识符的语法

    这是一个演示代码 label var id let id 10 goto label 如果允许关键字作为标识符将是 let var var let var 10 goto let 这是完全合法的代码 但在antlr中似乎很难做到这一点 AF
  • Cakephp 检索 HABTM 的条件

    我正在使用 cakephp 并希望显示属于类别 X 的所有提交内容 我有 4 个具有 HABTM 关系的表 用户 gt haveMany gt 提交 hasAndBelongsToMany 类别 但我想使用 this gt paginate
  • 在 Symfony 2 中使用自定义存储库时显示错误?

    我是 symfony 2 的新手 我尝试在 symfony 2 中使用自定义存储库 在detailsRepository php 文件中编写函数后 在我写的控制器中 em this gt getDoctrine gt getEntityMa
  • iBatis 创建多个注解的数组(注解复用)

    我的问候 我很新iBatis我遇到过这样的优化问题 我有两个完全相同的 Results只有 1 个参数不同 有什么方法可以创建某种注释数组以将其重用于映射 来源看起来像这样 public static interface StoreMapp
  • Xcode 9:将静态框架链接到另一个静态框架

    本着 Xcode 9 的 革命性 功能 即编译静态框架 的精神 我们试图将子项目构建为静态框架 以便它们可以静态链接到主应用程序目标 我们的子项目之一本身具有静态框架依赖项 Firebase 当我们将子项目构建为动态框架时 一切正常 但是一
  • 在视口元标记中设置最小宽度

    我正在设计一个网页 响应式 屏幕的最小宽度应为 480px 我该怎么做 现在我将宽度固定为 480px 这在手机上看起来很完美 但在平板电脑上看起来相当大 对于大屏幕 宽度应该动态变化 我写了一个polyfill来添加min width到视
  • PHP 电子邮件编码?

    我在发送电子邮件时遇到外来字符问题 有人可以建议我该怎么做吗 我怀疑问题可能是以下三件事之一 html页面编码不正确 这会影响表单中的 POST 数据吗 邮件功能没有任何编码 因此程序不知道如何读取它 最有可能的 文件本身没有正确的编码 因
  • CMake可以使用g++编译C文件吗?

    我曾参与过一个项目 其中使用 g 编译以 c 结尾的文件中的 C 代码 原因是我被告知 g 有更好的警告消息 我正在将该项目的构建过程切换为使用 CMake 我发现最初CMake想使用gcc来编译C文件 由于在使用时声明变量之类的原因 此操
  • 删除古腾堡 CSS

    我在 WordPress v4 9 8 中安装了 Gutenberg 插件 并尝试删除它附带的 CSS 以便我可以提供自己的 CSS 这是包含在内的表 我已经尝试过以下方法 add action wp print styles wps de
  • 如何在 AngularDart 中从父组件引用子组件

    我有两个组件 ComponentOne and ComponentTwo NgComponent class ComponentOne div h1 Component One h1 div
  • 在 docker 容器内运行 docker 容器时如何解决 cgroup 错误?

    我正在尝试在一个正在运行的 ubuntu docker 容器中运行一些多容器构建测试 我用它来构建我的应用程序 通常 我有一个 Gitlab CI 设置 我发现当尝试运行指定内存限制的容器时 我遇到如下错误 ERROR for
  • 带选项卡的 NSAttributedString

    你如何创建一个UILabel用这种文本格式 你会使用 NSAttributedString 吗 NSAttributedString 可以创建带有制表位的文本列 这与在文字处理程序中的完成方式类似 具有相同的限制 let text Name
  • vi(m) 中的驼峰式下划线

    如果由于某种原因我想在 Vim 中选择性地将驼峰命名法转换为下划线分隔 我该怎么做呢 目前我发现我可以进行搜索 s a z A Z 并记录一个宏来添加下划线并转换为小写 但我很好奇是否可以用以下方法来做到这一点 s a z A Z 1 u
  • Pip3 在 docker 构建期间无法安装requirements.txt

    我正在使用 docker 教程 https docs docker com language python build images https docs docker com language python build images 构建
  • 位置:固定导航不会保持固定

    我正在开发的网站遇到了很多问题 甚至下载到缓慢的页面加载等等 但我遇到的最大问题是固定位置元素的行为 首先 导航应该始终保持固定 但事实并非如此 但是 如果您在滚动时重新加载 它确实会出现在页面中间 很奇怪 直播网站在这里 http www