Avatar billede janemil Nybegynder
18. december 2014 - 12:03 Der er 10 kommentarer og
1 løsning

Standard top som ruller med ned

Med helt standard style har jeg en bar som bliver i toppen af siden når man scroller ned. Nu skal jeg lave en bar over denne som ikke scroller med ned.

Hvordan laver jeg nemt så "hullet" på de 100 pixels lukkes når man man er scrollet 100 pixel ned. Ellers der det lidt dum ud.

<table width="100%" border="0" style="position: fixed;z-index:100;opacity:0.9;background-color:white">
        <tr>
            <td align="center">
                    <table width="1010px" border="0">
                    <tr>
                        <td style="text-align:right;" height="53px">Her er rullemenuen</td>
                    </tr>
                </table>
            </td>
        </tr>
</table>
Avatar billede keysersoze Guru
18. december 2014 - 14:55 #1
Du bliver nok nødt til at blande lidt JavaScript ned over - først er din top placeret normalt og når siden er scrollet 100+ pixel sætter du nye styles/klasser på og gør toppen fixed.
Avatar billede janemil Nybegynder
18. december 2014 - 15:15 #2
Hvilket du har link til lille guide kunne det være super. Kan ikke helt få det til at virke.
Avatar billede keysersoze Guru
18. december 2014 - 15:27 #3
ikke uden at jeg finder noget tilfældigt på Google. Jeg vil hellere se hvad du har forsøgt at lave selvom det næppe kan være meget på 20 minutter.
Avatar billede Mik2000 Professor
21. december 2014 - 00:47 #4
1: Drop tabel løsningen og div eller semantiske html5 tags
2: Smid CSS i selvstændig fil
3: Brug jquery scroll, jquery height og animate til at sørge for linjen kører op når man scroller eller evt. bare jquery css hvis der ikke skal være animation
Avatar billede Mik2000 Professor
21. december 2014 - 00:47 #5
og brug div eller semantiske html5 tags skulle der stå
Avatar billede janemil Nybegynder
22. december 2014 - 11:44 #6
Kiggede i denne - eksempel 2
http://css-tricks.com/scroll-fix-content/

Eventen jeg håber fange min scroll. Nok det som driller.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" language="javascript">
        var menuscrollerjs = $("#menuscroller");
        menuscrollerjs.on("scroll", function (e)
        {
            if (this.scrollTop > 100)
                {
                menuscrollerjs.addClass("menuscrollerfixed");
                }
            else {
                menuscrollerjs.removeClass("menuscrollerfixed");
                }
        });
    </script>

**
Tabellen der først sætte sig fast efter at have scrollet 100.

    <table width="100%" border="0" id="menuscroller" style="z-index:100;opacity:0.9;background-color:white;">
        <tr>
            <td align="center">
                    <table width="1010px" border="0">
                    <tr>
                        <td style="text-align:right;" height="53px">Sub menu</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

**
Class som skal slå til fra

.menuscrollerfixed
{
    position: fixed;
}
Avatar billede keysersoze Guru
22. december 2014 - 12:02 #7
Betyder det så at du er færdig eller at du stadig har udfordringer?

Det eneste jeg ikke kan lide ved din løsning er at funktionen i scroll-eventen bankes af hver gang og hvis du sætter en gang console.log på kan du se at det er rigtig rigtig mange gange. Derfor pakker man det normalt ind i en timer så det maksimalt fyres afsted fx hver 100ms.
Avatar billede janemil Nybegynder
22. december 2014 - 12:35 #8
Det virker ikke helt for mig. Der er et eller andet som gør den nu ikke bliver fixed.
Og jeg kommer slet ikke ind i min if sætning.

Ja hvis jeg engang får det til at virke vil jeg kigge på det med timer.
Avatar billede keysersoze Guru
22. december 2014 - 13:35 #9
Jeg ved ikke hvordan din kode er sat op - men for at det skal kunne virke skal dit JavaScript enten (og helst) ligge i bunden af siden eller også skal du pakke det ind i ready; http://api.jquery.com/ready/
Avatar billede janemil Nybegynder
22. december 2014 - 15:42 #10
Mange tak for hjælpen. Kan du ligge svar keysersoze.
Avatar billede keysersoze Guru
22. december 2014 - 17:39 #11
svar
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester