javascript - 使用 jQuery 滚动固定内容

Question

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

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

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

This is an example我追求的效果。您可以看到小内容允许您先滚动它，然后在所有内容都被查看后固定到内容的底部并继续滚动左侧的图像。

我想我可能需要对滚动时的视口(viewport)做些什么，但我不确定如何实现？

这是我的代码:

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 中较小的一个添加类和删除类。我用我自己的其他方式完成了(但这根本不是正确的方法)。

我已将 较小的 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>