Utworzenie menu po zjechaniu


(BLEKBLEKBLEK) #1

Witam, mam menu i chce że, jeżeli zjadę niżej na stronie to żeby te menu automatycznie zrobiło się na całą stronę. To się robi w JS tylko nie wiem pod czym szukać.


(Fizyda) #2

javascript scroll menu fixed


(krystian3w) #3

Można próbować w css: https://caniuse.com/#feat=css-sticky

 position: -webkit-sticky; /* dla safari */
          postion: sticky;
                 top: 0px;

Test kompatybilności: caniuse.com/#feat=css-sticky

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1 12 1.0 (1.0) [1][6] 4.0 [3] 4 1.0 (85)
fixed value 1 12 1.0 (1.0) [4] 7.0 4 1.0 (85)
sticky value 56 16 [5] 32 (32.0) [2] No support 43 6.1 -webkit-
Opis punktów z nawiasów (uproszczona po najechaniu na cyfrę)

1 Since Firefox 30, Gecko allows <tr>, <thead>, and <tfoot> elements with a position: relative; style to act as absolute positioning containers. This means that a position: absolute; styled element inside the table can be positioned relative to these elements. In other browsers and in older versions of Firefox, setting position: relative; on a table row or row group has no effect. Firefox helps developers transition to the new behavior and detect any rendering issues it may cause on their sites by printing a warning to the JavaScript console if you use this feature: Relative positioning of table rows and row groups is now supported. This site may need to be updated because it may depend on this feature having no effect.

2 In Firefox 26 to Firefox 31 (inclusive), sticky positioning only works when the about:config preference layout.css.sticky.enabled is set to true. From Firefox 27 to 31, true is the default value for Nightly and Aurora versions of the browser. The preference has been removed in Firefox 48.

3 In Internet Explorer, fixed positioning doesn’t work if the document is in quirks mode.

4 Prior to Firefox 44, position: fixed didn’t create a stacking context in most cases. The specification, and Gecko implementation, have been modified to mimic Chrome and Safari’s long-time behavior.

5 Sticky positioning is in preview for Edge.

6 Firefox has got a bug whereby absolute positioning does not work as it should when applied to elements inside tables that have border-collapse applied to them (see bug 1379306). This is fixed as of Firefox version 57.

Feature Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) 1.0 (1.0) [1] ? (Yes) 7.0 -webkit-
fixed value (Yes) (Yes) ? ? ? (Yes) ?
sticky value 56 56 ? ? ? 43 ?