PHP-FUSION DEUTSCHLAND
  • DEIN CMS - DEINE ZUKUNFT
Thread Verfasser: Rolly8-HL
Thread ID: 1136
Thread Info
Es gibt 1 Beiträge zu diesem Thema, und es wurde 2200 Mal angesehen.  Ausserdem wurden Dateien angehängt.

PHP-Fusion Deutschland - Offizielle Supportseite » Support Allgemein » Anfängerfragen

 Thema drucken
Tool Bar Navigation
Rolly8-HL
Top  #1 Beitrag drucken
Geschrieben am 21. November 2016 12:15:40
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.
Code Download Code  

    $(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
Code Download Code  

    $(document).ready(function(){

        $(window).scroll(function(){

            if ($(this).scrollTop() > 180) {

                $('.scroll_bar').fadeIn(0);

            } else {

                $('.scroll_bar').fadeOut(0);

            }

        });

    });

CSS
Code Download Code  

.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
Code Download Code  

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
 
WWW
Springe ins Forum: