`
Turbo12138
  • 浏览: 44281 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

position:fixed定位后,固定的导航栏在小窗口无法显示右侧内容

 
阅读更多

用js监控页面resize和scroll事件为外层容器添加一个负的left定位,代码如下,需要的可参考:

document.addEventListener("scroll",setPosition);
window.addEventListener("resize",setPosition);
    function setPosition(){
        var scroll_Left = document.body.scrollLeft;
        $(".header").css('left',~scroll_Left + 1);
    }

 亲测有用~

分享到:
评论

相关推荐

    使用CSS样式position:fixed水平滚动的方法

    在网页设计中,CSS的`position:fixed`属性通常用于创建元素的固定定位,使得元素在页面滚动时始终保持在屏幕的某个位置。然而,当页面存在水平滚动条时,`position:fixed`元素仅能实现垂直方向的固定,而无法实现...

    CSS中如果固定定位只给出了定位模式position:fixed,没给出边位移引发的问题

    在CSS布局中,定位是实现元素精确放置的关键技术。...仅设置`position: fixed`而不指定边位移会导致元素无法正确定位,可能会产生意外的布局效果。因此,理解和正确应用定位模式以及边位移是CSS布局中的核心技能。

    IE6中的position:fixed定位兼容性写法分享

    `position: fixed`允许元素相对于浏览器窗口进行定位,无论页面滚动与否,它始终保持在屏幕的特定位置。但在IE6中,这个属性并不支持,导致开发者需要寻找替代解决方案。 在标题和描述中提到的"IE6中的position:...

    HTML5&CSS3网页制作:固定定位.pptx

    在网页设计中,固定定位经常用于创建固定在屏幕顶部或底部的导航栏,无论用户滚动页面多远,导航栏始终保持可见。以下是一个简单的例子: ```html <!DOCTYPE html> .fixed-nav { position: fixed; top: 0; ...

    网页带图标固定在右侧的右侧导航

    本项目实现的是一个带有图标的固定在右侧的导航栏,它包括了固定定位、响应式设计以及返回顶部等实用功能。下面将详细讲解相关知识点: 1. **固定定位(Fixed Positioning)**: 在CSS中,`position: fixed;`属性...

    淘宝右侧悬浮导航栏

    淘宝右侧悬浮导航栏是网页设计中一种常见的交互元素,它能够提供便捷的页面导航功能,随着用户滚动页面,导航栏始终保持在屏幕右侧可见。这种设计不仅增强了用户体验,还能确保用户在浏览长页面时能快速访问各个主要...

    固定定位布局

    在实际应用中,固定定位布局常常用于制作固定在顶部的导航栏,即使用户滚动页面,导航栏仍然可见。这可以确保用户在浏览长页面时能快速访问导航链接。此外,还可以用于创建始终显示在屏幕一侧的侧边栏,或者在滚动时...

    纯css3淘宝右侧固定导航样式代码

    这段代码将创建一个简单的固定在右侧的导航栏,具有基本的样式和悬停效果。实际项目中,可能还需要考虑更多的细节,例如链接的激活状态、元素之间的间距、动画效果等。 在提供的压缩包文件"texiao3590_1560681128...

    模仿百科百科右侧导航栏

    可以使用CSS定位技术(如`position: fixed`)使导航栏固定在页面右侧。 3. **jQuery事件监听**:添加滚动事件监听器,当页面滚动时,通过计算内容区域相对于窗口的位置来更新导航栏中的激活状态。例如,如果当前...

    CSS实现模拟position的fixed页面定位效果

    在网页设计中,`position:fixed` 是一种 CSS 定位模式,用于创建元素固定在浏览器视口中的某个位置的效果,即使用户滚动页面,该元素也会保持在屏幕上的指定位置。然而,在某些不支持 `position:fixed` 或者需要兼容...

    vertical-fixed-navigation-2.zip_fixed

    例如,创建一个固定在左侧的垂直导航栏的CSS代码可能如下: ```css .navbar { position: fixed; top: 0; left: 0; width: 200px; /* 导航栏宽度 */ height: 100%; /* 全屏高度 */ background-color: #333; /*...

    jquery右侧跟随悬浮固定窗口

    【jQuery右侧跟随悬浮固定窗口】是一种常见的网页设计技术,它能提供用户友好的浏览体验,尤其是在长页面中,用户无需滚动回顶部就能访问关键信息。这种设计方式在现代网页开发中广泛应用,例如百度广告和网站头部等...

    css3仿淘宝右侧固定导航代码

    当设置元素为固定定位时,它将相对于浏览器窗口定位,即使页面滚动也不会移动,始终在屏幕的特定位置显示。 3. **盒模型和布局** CSS3中的盒模型包括内容(content)、内边距(padding)、边框(border)和外边距(margin...

    超过一定高度出现左右浮动导航及底部固定导航代码悬浮漂浮

    标题"超过一定高度出现左右浮动导航及底部固定导航代码悬浮漂浮"涉及到的是一个特定的网页设计实现方式,即当用户滚动页面到一定高度后,导航栏会从页面的一侧(通常为左侧或右侧)浮出,并且在页面底部有一个固定的...

    css将div层固定显示在页面底部不随滚动条滚动

    在网页设计中,有时候我们需要创建一个或多个页面元素,比如按钮或图标,始终固定在浏览器窗口的底部,即便页面向下滚动,该元素依然保持在视窗底部。这可以用来创建返回页面顶部的按钮,提供快速导航等。要实现这样...

    右侧跟随悬浮固定窗口.zip

    在IT行业中,网页设计与开发是一项至关重要的技能,而"右侧跟随悬浮固定窗口"是一种常见的交互设计模式,尤其适用于提供导航、工具栏或侧边栏信息。这种效果可以使用户在滚动页面时,某些元素始终保持在屏幕的一侧...

    CSS3淘宝右侧固定导航代码.zip

    1. **定位(Positioning)**:为了使导航栏在页面滚动时始终固定在右侧,通常会使用`position: fixed`属性。这将使元素相对于浏览器窗口定位,而不是相对于其父元素。同时,通过设置`right`、`top`属性来调整其在...

    左侧固定右侧自适应css样式.zip

    - `position: fixed`: 将左侧栏设置为固定定位,使其在页面滚动时始终位于视口左侧。 - `left: 0`: 确保左侧栏紧贴屏幕的左侧边缘。 - 对于右侧自适应部分,通常使用`position: relative`或`position: static`,...

Global site tag (gtag.js) - Google Analytics