Thread Verfasser: Rolly8-HL
Thread ID: 1136
Thread Info
Es gibt 1 Beiträge zu diesem Thema, und es wurde 2091 Mal angesehen.  Ausserdem wurden Dateien angehängt.
 Thema drucken
Tool Bar Navigation
Rolly8-HL
Hallo, habe wieder ein mal eine Fachfrage.

Habe mir eine Tool Bar Navigation gemacht die beim runter Scrollen erscheint,
ist 40px Hoch, nur leider verdeckt sie jetzt bei direktem aufrufen den ersten Teil der Ausgabe Forum Kommentare & Co.

    $(document).ready(function(){
        $(window).scroll(function(){
            if ($(this).scrollTop() > 80) {
                $('.scrollup2').fadeIn();
            } else {
                $('.scrollup2').fadeOut(100);
            }
        });
 
        $('.scrollup3').click(function(){
            $("html, body").animate({ scrollTop: 0 }, 600);
        });

        $('.scrollup4').click(function(){
$('html, body').animate({ scrollTop: $(document).height() }, 600);
        });

        $(window).scroll(function(){
            if ($(this).scrollTop() > 80) {
                $('.scrollup').fadeIn();
            } else {
                $('.scrollup').fadeOut(100);
            }
        });
        $('.scrollup').click(function(){
            $("html, body").animate({ scrollTop: 0 }, 600);
        });
    });


Nun würde ich gerne die Ausgabe um genau diese 40px runter ziehen lassen das sich diese unter der Tool Bar Navigation angezeigt wird.

Demo: http://mf.rolly8-hl.de/forum/viewthre...d=4#post_3

Hat da einer eine Idee wie oder wo ich mit was anfangen sollte?

Zusammengefügt am 21. November 2016 um 18:08:00:
Nachtrag:
Habe da was gefunden und so gemacht.
JS

    $(document).ready(function(){
        $(window).scroll(function(){
            if ($(this).scrollTop() > 180) {
                $('.scroll_bar').fadeIn(0);
            } else {
                $('.scroll_bar').fadeOut(0);
            }
        });
    });

CSS

.scroll_bar {
   width: 50% ;
   height: 60px ;
   display: none;
   -moz-transition: height 0.2s ease;
   -ms-transition: height 0.2s ease;
   -o-transition: height 0.2s ease;
   -webkit-transition: height 0.2s ease;
   transition: height 0.2s ease;   
   }

header.php

echo "</head>\n<body>\n";
echo "<div class='scroll_bar' ></div>\n";


Diese Demo sollte besser zur Ansicht sein, http://rolly8-hl.de/forum/viewthread....3#post_153

Nun will mir aber der transition: height 0.2s ease es nicht flüssig ein und ausblenden, es hüpft ein wenig.
Was mache da jetzt falsch?
Rolly8-HL hat folgende Datei angehängt:
Du hast nicht die Berechtigung die Anhäge dieses Themas zu sehen.

Bearbeitet von Rolly8-HL am 21. November 2016 17:08:00
Gruß Rolly8-HL
Was für Andere Wichtig ist muss für mich nicht genauso Wichtig sein!
Bin Dickkopf Unbelehrbar mache aus Protest nicht das was andere für Richtig halten!
Das gibt einem zu Denken oder?
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
Springe ins Forum: