Question

我正在使用jQuery来检测两列中哪个div更大。较小的div获得.js-small-content类。该课程上有一个position:fixed。

然而，我遇到的问题是我需要能够滚动固定内容。我理解这听起来很奇怪，为什么我要滚动固定的东西？

如果你看一下我的jsFiddle，你会看到我需要能够滚动猫的内容，这样我才能看到所有的图像。

This is an example我所追求的效果。你可以看到小内容允许你先滚动它然后一旦它被全部查看它然后修复到内容的底部并继续滚动左边的图像。

我想我可能需要在滚动视口上做一些事情，但我不确定如何实现这个目标？

这是我的代码：

var a = document.querySelector('#single__images');
var b = document.querySelector('#single__content');

var aH = a.scrollHeight;
var bH = b.scrollHeight;

(aH > bH ? b.classList.add("js-small-content") : a.classList.add("js-small-content"));

HTML：

<article>
   <div id="single__image"><img src="#"/></div>
   <div id="single__content">Text goes here</div>
</article>

Answer 1

我为此工作了很长时间，这对我来说很有挑战性。终于做到了。

根据您的说法，您希望在两个div's 中添加类并将类删除为较小的一个。我已经用我自己的其他方式完成了（但它的“不正确的方式”）。

当从顶部到达窗口位置的四分之三处时，我已经较小的div停止滚动。

JSFiddle : Demo

$(window).scroll(function()
{
    var divImg = document.getElementById("single__images").id;
	var divCont = document.getElementById("single__content").id;
    
    // Height of single__content
    var hC = $("#" + divCont).outerHeight(); 
     
    // Height of single__images
    var hI = $("#" + divImg).outerHeight(); 
    
    // Check out the smaller one
    if(hC<hI)
    {
        var samllOne = document.getElementById("single__content").id;
    }
    else
    {
    	var samllOne = document.getElementById("single__images").id;
    }

    // Height of Smaller Div
    var h = $("#" + samllOne).outerHeight(); 
    
    
    
    // Position of Smaller Div from top
    var topPos = $("#" + samllOne).position();
    var topPos = topPos.top; 

    // Height of Smaller Div
    var h = $("#" + samllOne).outerHeight(); 

    // Div Height + TOP Space from from Body
    var bottomCont = topPos + h;
	
    // Checks current Scroll
    var curScroll = $(this).scrollTop();
    
    var windowH = $(window).innerHeight();
    var windowMid = windowH / 2;
    var midOfMid = windowMid / 2;
    
    var threeFourth = windowMid + midOfMid;
    var bottomTouch = h - threeFourth;
    
	if(curScroll >= bottomTouch)
    {
    	 $("#" + samllOne).css({position: "fixed", top: "-" + bottomTouch + "px" });
    }
    else
    {
    	 $("#" + samllOne).css({position: "relative", top: "0px" });    	
    }
});

article {
    position:relative;
}

#single__images {
    float:left;
    width:200px;
}

img {
    max-width:100%;
    width:100%;
}

#single__content {
    float:right;
    width:200px;
    right:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<article>
   <div id="single__images">
       <div class="inner">
       <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg"/>
       <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg"/>
       <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg"/>
       <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg"/>
       <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg"/>
       </div>
   </div>
   <div id="single__content">
       <div class="inner">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin commodo sed libero non lobortis. Aliquam aliquam vulputate felis. Phasellus hendrerit tellus ut libero bibendum rhoncus. Cras et ultricies neque. Curabitur posuere leo scelerisque mattis semper. In et arcu dictum, dictum libero ac, blandit nibh. Ut pharetra velit non blandit pretium. Suspendisse malesuada sodales orci, nec interdum ligula vestibulum ut. Mauris libero massa, tempus vel eleifend sit amet, efficitur nec sem.

Vivamus pretium malesuada ligula quis pulvinar. Duis ornare at massa et elementum. In ac consectetur turpis. Duis in velit nec nunc feugiat semper at in augue. Praesent ut odio quam. Ut faucibus eget massa a suscipit. Mauris fermentum est sed hendrerit lacinia. Mauris ac eleifend dolor. Phasellus rutrum volutpat efficitur. Maecenas vestibulum auctor massa, non dapibus diam laoreet id. Curabitur tincidunt massa vitae nibh varius iaculis. Duis sit amet nisi tempor, vestibulum ipsum at, rutrum purus. Mauris accumsan vulputate convallis. Morbi hendrerit ultrices erat, eu mollis neque faucibus id. Fusce sed magna semper justo placerat placerat quis eget augue.

Phasellus fermentum laoreet felis nec efficitur. Donec ultrices rutrum auctor. Duis faucibus rutrum tortor, ut eleifend libero pellentesque vitae. In nec ullamcorper justo. Donec eget aliquam est. Phasellus semper aliquam odio eu interdum. Praesent ultricies lectus nibh, ac bibendum lacus tempor sed. In ac ultrices sapien, vitae iaculis diam. Nullam pharetra lacus quis facilisis finibus. In a nisl aliquam, viverra dolor quis, auctor metus. Cras nec euismod nulla.

Duis sed ultrices erat. Sed semper lorem vel turpis aliquam vulputate. Nam ornare mauris a lorem posuere, id ultrices erat fringilla. Morbi eget posuere felis. Donec semper odio vitae porta bibendum. Duis sit amet metus at ligula iaculis pretium. Quisque at consectetur tortor. Etiam nec nisi porttitor, dignissim odio quis, condimentum risus. Quisque ipsum ipsum, pulvinar vel mi non, semper fringilla lacus. Mauris vestibulum mauris semper mauris venenatis, vitae suscipit dolor tincidunt. Aliquam eget mi lacus.

Nullam hendrerit sem ligula, sit amet malesuada ipsum rhoncus ut. Aenean urna nisl, finibus at arcu a, posuere aliquet odio. Fusce mollis dapibus leo, non aliquam tellus facilisis sit amet. Nunc commodo mauris eu gravida vehicula. Vestibulum sagittis magna orci, in tempus urna lacinia ut. Suspendisse potenti. Pellentesque ultrices, tellus sed laoreet tincidunt, urna mi facilisis sapien, a pretium lacus leo vitae elit.
       </div>
       </div>     
</article>

Answer 2

我更新了你的JSFiddle项目。

我刚刚将以下内容添加到您的CSS文件中。希望这有帮助，并且是一种自我解释。

    .js-small-content {
        position:absolute;
        overflow-y:scroll;
        overflow-x:hidden;
        height:130px;
}

使用jQuery滚动修复内容

2 个答案: