将选项卡固定到页面顶部，但位于标题下方 [英] Fixing tabs to the top of the page, but underneath the header

问题描述

我试图弄清楚如何为网站设计一个标题，以便标题下方有标签（看起来像是从标题下面伸出），并保持标题作为页面向下滚动（并且标题向上移动），但是当它们到达页面顶部时，它们就会固定在那里，以便它们始终可见。

我知道如何将一个元素修复到页面的顶部，以便始终可见，但是当页眉位于窗口中时，我希望制表符显示在其下方，而不是顶部。当标题离开页面时，标签仍然存在。

我需要的是使用CSS和/或JavaScript的解决方案。有谁知道一种方法可以做到这一点？

解决方案

Remy Sharp ， Left Logic 和 jQuery for Designers 提供了一个类似于 -ish 主题的教程：固定浮动元素。

这个模拟从英国苹果公司（点击产品进行配置，并在滚动页面时观看摘要/规格框）涵盖了几乎所有您需要了解的技术，以适应您的技术要求。

显然，从URL到网站，它确实需要（或至少是使用）jQuery，而不是纯Javascript。

I'm trying to figure out how to design a header for a website so that there are tabs placed underneath the header (that look like they're sticking out from under the header), that stay with the header as the page is scrolled down (and the header moves up), but when they reach the top of the page become fixed there so that they're always visible.

I know how to fix an element to the top of the page so that its always visible, but when the header is in the window, I want the tabs to appear below it, not at the top. When the header is off the page, the tabs will still be there.

What I need is a solution using CSS and/or JavaScript. Does anyone know of a way to do this?

解决方案

Remy Sharp, of Left Logic, and jQuery for Designers offers a tutorial on a similar-ish subject: fixed-floating-elements.

This emulates the shopping basket from the UK Apple store (click on a product to configure, and watch the summary/specification boxes as you scroll the page) covers pretty much everything you should need to know to adapt the technique to suit your own requirements.

Obviously, from the URL to the site, it does require (or, at least, makes use of) jQuery, rather than plain Javascript.

这篇关于将选项卡固定到页面顶部，但位于标题下方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！