selfhtml.de - Alles für den Webmaster!

 

Empfehlung:

wix.com

Kostenlose Homepage

Besuchen Sie auch:

Jobs:

wenn gescrollt wurde andere class vergeben

Autor: seaside-design
Datum: 29.11.2013 22:27:25

Hallo :)

ich habe ein Problem und hoffe, dass ihr mir helfen könnt.
Ich arbeite an einer Website, die eine fixe Navigation hat, diese ist am oberen Browserrand platziert.
Sobald auf der Seite aber gescrollt wird, soll eine andere bzw eine kleinere Version der Navigation eingeblendet werden.

Nun mein Problem: Ich bin in HTML und CSS topfit, bei javascript hängts allerdings etwas.
Ich dachte mir, ich kann per JS abfragen, ob auf der Seite gescrollt wurde, und wenn ja dem Navi-Div einfach eine andere class vergeben.. würde das funktionieren? Und wie gehe ich das am besten an? Ich suche mich schon seit einer Weile durchs Netz, allerdings werden als Lösungsansätze bei JS irgendwie immer nur einzelne Wörter in den Raum geworfen, die mir als JS Kacknoob so ohne Zusammenhang leider kein bisschen weiterhelfen..

Würde mich über eine Antwort freuen :)
Liebe Grüße



Re: wenn gescrollt wurde andere class vergeben

Autor: Freddy
Datum: 30.11.2013 00:07:10

Hallo,

> [...] Sobald auf der Seite aber gescrollt wird, soll
> eine andere bzw eine kleinere Version der
> Navigation eingeblendet werden.
> Und wie gehe ich das am
> besten an?

Du kannst es mal so versuchen:
http://pastebin.com/cEs93sJz

-----------------------------

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Wurde gescrollt?</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript">
        var l = (window.console !== undefined) ? window.console.log.bind(console) : function() {};
        $(function() {
            $(window).on('scroll', function(e) {
                var nav = $('nav');
                if ($(this).scrollTop() > 0) {
                    nav.addClass('mini');
                } else {
                    nav.removeClass('mini');
                }
            });
        });
    </script>
    <style type="text/css">
        body {
            font: 100.01%/1.6 sans-serif;
        }
        
        nav {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 2em;
            line-height: 2em;
            background-color: #ddd;
            border-bottom: 1px solid #ccc;
            font-size: 2em;
            transition-duration: 1s;
        }
        
        nav ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
            text-align: center;
        }
        
        nav li {
            display: inline-block;
            margin: 0 30px 0 0;
        }
        
        nav a {
            color: #333;
            text-decoration: none;
        }
        
        nav.mini {
            opacity: .85;
            background-color: #000;
            transition-duration: 1s;
            font-size: 1em;
        }
        
        nav.mini a {
            color: #fff;
        }
        
        #content {
            padding: 4em 0;
            margin: 0 auto;
            max-width: 1110px;
            text-align: justify;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li><a href="#">Link 5</a></li>
        </ul>
    </nav>
    
    <div id="content">
        <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

        Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.

        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

        Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

        Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

        Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

        Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.

        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

        Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

        Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

        Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
    </div>
</html>

Hope that helps. :-)


Gruß,
Freddy



Re: wenn gescrollt wurde andere class vergeben

Autor: seaside-design
Datum: 30.11.2013 00:13:23

genau sowas hab ich gesucht, dankedankedanke! :)



Re: wenn gescrollt wurde andere class vergeben

Autor: seaside-design
Datum: 30.11.2013 00:32:53

Jetzt muss ich doch nochmal kurz was fragen :D in dem Beispiel steht die Navi in dem <nav> tag (s.u.) und dementsprechend ist die Variable die verwendet wird so definiert:

>                 var
> nav = $('nav');

hier die Navi aus dem Beispiel:

>     <nav>
>
>         <ul>
>
>             <li><a
> href="#">Link 1</a></li>
>
>             <li><a
> href="#">Link 2</a></li>
>         </ul>
>     </nav>

Bei mir steht die Navi jetzt aber in einem <div id="nav"> - wie wird dann hier die variable definiert?

var nav = $('#' + 'nav');

das und ein paar andere sachen, die ich ausprobiert hatte, funktionieren nicht.. =/



Re: wenn gescrollt wurde andere class vergeben

Autor: Netinja
Datum: 30.11.2013 09:27:19

> Bei mir steht die Navi jetzt aber in einem
> <div id="nav"> - wie wird dann hier die
> variable definiert?
>
> var nav = $('#' + 'nav');
>
> das und ein paar andere sachen, die ich
> ausprobiert hatte, funktionieren nicht.. =/

Hallo,

Sehr interessantes Problem, das mich jetzt auch interessiert. ;-)
Wenn das Menü sich verkleinert, sollte sicher auch gleichzeitig der Content ein Stück hochrutschen. Der steckt aber jetzt nicht in einem html5-Element. Vielleicht kann Freddy uns noch sagen, wie man an die id #content den Zusatz mini dranhängt, sodass man #content-mini extra stylen kann.

lg
Netinja



Re: wenn gescrollt wurde andere class vergeben

Autor: Freddy
Datum: 30.11.2013 12:50:08

Hallo,

> Jetzt muss ich doch nochmal kurz was fragen :D in
> dem Beispiel steht die Navi in dem <nav>
> tag (s.u.) und dementsprechend ist die Variable
> die verwendet wird so definiert [...]:

> Bei mir steht die Navi jetzt aber in einem
> <div id="nav"> - wie wird dann hier die
> variable definiert?
>
> var nav = $('#' + 'nav');

Ich habe jQuery benutzt. jQuery erwartet (u.a.) (einen) CSS-Selektor(en), genauso, wie Du es in CSS gewohnt bist. Wenn Du ein Element mit der ID "nav" ansprechen möchtest, schreibst Du "$('#nav').doStuff()". Du kannst auch mehrere Elemente ansprechen (auch wie in CSS, kommasepariert): "$('body, #nav, .list-item, :visitied').doStuff();"

Ich habe einfach nur das "neue" HTML5-Element NAV benutzt, um etwas Semantik reinzubringen.


> das und ein paar andere sachen, die ich
> ausprobiert hatte, funktionieren nicht.. =/

Jetzt weiß ich leider nicht, was Du ausprobiert hast. Du müsstest uns schon zeigen, was Du versucht hast.


Gruß,
Freddy



Re: wenn gescrollt wurde andere class vergeben

Autor: Freddy
Datum: 30.11.2013 13:19:43

Hallo,

> Wenn das Menü sich verkleinert, sollte sicher
> auch gleichzeitig der Content ein Stück
> hochrutschen.

Soso, _sollte_ das so sein? Na, okay... ;-)


> Vielleicht kann Freddy uns
> noch sagen, wie man an die id #content den Zusatz
> mini dranhängt, sodass man #content-mini extra
> stylen kann.

Meines Erachtens nach ist es überflüssig die ID von "content" zu "content-mini" zu ändern. Warum nicht auch einfach die Klasse "mini" dranhängen?
Folgendes Beispiel zeigt beide Wege und einen "One-Liner", den ich verwenden würde (steckt in der letzten auskommentierten $(function() { ... }); drin):

http://pastebin.com/J1a4ruNn

Ich hoffe die Kommentare helfen etwas.


Gruß,
Freddy



Re: wenn gescrollt wurde andere class vergeben

Autor: Netinja
Datum: 01.12.2013 02:16:04

Hallöchen

> > Wenn das Menü sich verkleinert, sollte
> sicher
> > auch gleichzeitig der Content ein Stück
> > hochrutschen.
>
> Soso, _sollte_ das so sein? ;-)

Jaahaa :-D
glaub ich jedenfalls.

>

>
> http://pastebin.com/J1a4ruNn
>
> Ich hoffe die Kommentare helfen etwas.

Danke Freddy :-)
Ich gucke es mir morgen in Ruhe an. Heute ist es schon spät und ganz nüchtern bin ich auch nicht mehr :-D

LG
Netinja



Re: wenn gescrollt wurde andere class vergeben

Autor: seaside-design
Datum: 01.12.2013 15:08:40

Danke euch allen, hatte es in der Nacht npch zum Laufen gekriegt :D
kann nicht schlafen, bis sowas nicht funktioniert.
Der Fehler mit der ID des Divs lag an mir, war wohl schon etwas viel Wein.. ;D

Funktioniert jetzt jedenfalls perfekt, vielen Dank!