使用jQuery修复滚动行为 [英] Fixing scrolling behaviour with jQuery

问题描述

所以我有一个页面，该页面分为2列.左列有可扩展的表单，这些表单很长，无法询问用户可选的产品首选项.页面右侧有一个简短得多的联系方式"表格.联系人详细信息表是必填项.

So I have a page that is split into 2 columns. The left column there are expandable forms that are quite long to ask the user optional product preferences. On the right side of the page there is a much shorter, 'contact details' form. The contact details form is mandatory.

该行为的想法是，当用户向下滚动以完成左列的可选表单时，页面将仅滚动左列-右列中显示的联系方式表单保持在原处，以避免出现较大的空白区域右列为空.

The behaviour idea is that as the user scrolls down to complete the left column optional forms, the page will only scroll the left column - the contact details forms displayed in the right column stays in place to avoid a big gaping white space where the right column is empty.

使用mootools的实时网站示例: https://w3-markup.com/order -外观在您向上或向下滚动时显示在订单摘要框中.

Live site example using mootools: https://w3-markup.com/order - look at the order summary box as you scroll up and down.

有关如何在jQuery中执行此操作的任何建议/建议?

Any advice / suggestions about how to do this in jQuery?

谢谢！

推荐答案

您正在寻找的效果"可以通过一些简单的CSS来实现.使用position: fixed，可以在用户向下滚动页面时使元素保留在原位.然后，可以相对于视口使用top，right，bottom和left定位元素.像

The "effect" you are looking for can be achieved with some simple CSS. Using position: fixed, it is possible to make the element stay in place while the user scrolls down the page. You can then position the element with top, right, bottom and left relative to the viewport. Something like

#contact {
  postion: fixed;
}

会的.

这篇关于使用jQuery修复滚动行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！