容器内的固定div

本文介绍了容器内的固定div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

所以我有以下内容:

<div id="TwoColumns"> <div id="LeftColumn"> <div id="navigation"> /*This is a fixed navigation*/ Anchor link here to PointOne Anchor link here to PointTwo Anchor link here to PointThree </div> </div> <div id="RightColumn> <div id="PointOne"> Point One </div> <div id="PointTwo"> Point Two </div> <div id="PointThree"> Point Three </div> </div> </div>

1)我想做的是，当用户滚动LeftColumn内的导航移动并跟随用户向下移动时，它通常是固定元素，但仅限于在容器内.

2)单击锚点链接时，重新定位导航以与相关Point内联.

所以我要做的是在单击锚链接时将top:0;设置为navigation，这样做的问题是，当我滚动到顶部时，固定的div现在离开了它的容器，即LeftColumn. /p>

我不介意使用javascript和jquery.

更新

好的，所以Oswaldo Acauan html/css解决方案将我的第一点打勾了.

第二个问题仍然是一个问题.当我单击链接时，导航与右侧的内容不一致.

此刻我正在获得WRONG，并且希望获得CORRECT视野.我一辈子都想不通.

jsfiddle/BbAck/1/

解决方案

您可以尝试 Scrollspy 通过TwitterBootstrap， 或使用CSS/HTML和一点Javascript/jQuery完成.

演示此处

HTML:

<div id="Container"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <div id="TwoColumns"> <div id="LeftColumn"> <div id="navigation"> This should be in line with the top of the point <a href="#PointOne">Anchor link here to PointOne</a> <a href="#PointTwo">Anchor link here to PointTwo</a> <a href="#PointThree">Anchor link here to PointThree</a> </div> </div> <div id="RightColumn"> <div id="PointOne"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div id="PointTwo"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div id="PointThree"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </div>

CSS:

html,body { height: 100%; } #Container { overflow: hidden; } #LeftColumn { float: left; width: 50%; } #navigation.fix { position: fixed; top: 0; } #navigation a { display: block; } #RightColumn { width: 50%; float: right; } #PointOne { background-color: red; height: 159px; } #PointTwo { background-color: green; height: 400px; } #PointThree { background-color: purple; height: 650px; }

JS:

$(window).scroll(function() { yOffset = window.pageYOffset; yContainer = $('#Container').height() - $('#RightColumn').height(); if (yOffset >= yContainer) { $('#navigation').addClass('fix'); } else { $('#navigation').removeClass('fix'); } });​

So I have the following:

<div id="TwoColumns"> <div id="LeftColumn"> <div id="navigation"> /*This is a fixed navigation*/ Anchor link here to PointOne Anchor link here to PointTwo Anchor link here to PointThree </div> </div> <div id="RightColumn> <div id="PointOne"> Point One </div> <div id="PointTwo"> Point Two </div> <div id="PointThree"> Point Three </div> </div> </div>

1) What I want to do is when a user scrolls the navigation moves within the LeftColumn and follows the user down as a fixed element usually would but strictly within container only.

2) When a anchor link is clicked reposition navigation to be inline with relevant Point.

So what I am doing is setting top:0; for navigation when anchor link is clicked, the issue with doing this is that when I scroll to the top the fixed div now leaves it's container which is LeftColumn.

I don't mind using javascript and jquery.

UPDATE

Ok so Oswaldo Acauan html/css solution gets my 1st point ticked off.

The second issue still is an issue. When I click on link the navigation is not in-line with content on the right hand side.

I am getting WRONG at the moment and would like the CORRECT vision. I can't for the life of me figure it out.

jsfiddle/BbAck/1/

解决方案

You can try Scrollspy by TwitterBootstrap, or do it with CSS/HTML and a little bit of Javascript/jQuery.

Demo HERE

HTML:

<div id="Container"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <div id="TwoColumns"> <div id="LeftColumn"> <div id="navigation"> This should be in line with the top of the point <a href="#PointOne">Anchor link here to PointOne</a> <a href="#PointTwo">Anchor link here to PointTwo</a> <a href="#PointThree">Anchor link here to PointThree</a> </div> </div> <div id="RightColumn"> <div id="PointOne"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div id="PointTwo"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div id="PointThree"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </div>

​ CSS:

html,body { height: 100%; } #Container { overflow: hidden; } #LeftColumn { float: left; width: 50%; } #navigation.fix { position: fixed; top: 0; } #navigation a { display: block; } #RightColumn { width: 50%; float: right; } #PointOne { background-color: red; height: 159px; } #PointTwo { background-color: green; height: 400px; } #PointThree { background-color: purple; height: 650px; }

​ JS:

$(window).scroll(function() { yOffset = window.pageYOffset; yContainer = $('#Container').height() - $('#RightColumn').height(); if (yOffset >= yContainer) { $('#navigation').addClass('fix'); } else { $('#navigation').removeClass('fix'); } });​