McMaster-Carr的“滚动框”布局

Question

几年前麦克马斯特 - 卡尔完全重新设计了他们的网站，他们现在每个产品都有这些非常酷的“scrolling box”部分。我一直试图仅使用css和html复制相同的效果，但到目前为止没有运气。

使用html + css我无法完成的一些关键事项：

• 隐藏的滚动条，可以滚动
• 滚动到包含div的顶部时停止的节标题

我已经尝试查看他们的源代码，但我真的想从头开始并重新创建效果，希望找到一种更简单的方法来重新创建它。

如果有人之前见过这样的事情，或者知道如何创建这种类型的布局，请提供帮助。

以下是McMaster-Carr网站上一个页面的链接，该页面演示了滚动框布局：

http://www.mcmaster.com/#nylon-gears/=g1p46z

Answer 1

技术j08691 linked是常用的方法 - 你必须使用一些JS来找出网站滚动的位置。如果查看持久性头文件示例的来源，就会出现类似

的行

scrollTop = $(window).scrollTop()

简单地将其替换为父div的顶部位置（假设它与McMaster一样，在网站上修复）

scrollTop = $("div.MyParentDiv").position().top