css Übergang mit reinem Javascript

Ich möchte meine Animation Start von der Mitte statt von links machen. Ich füge den Code an, den ich gemacht habe.css Übergang mit reinem Javascript

function yScroll() { 
 
    var nav,yPos; 
 
    nav = document.getElementById('nav'); 
 
    yPos = window.pageYOffset; 
 
    if(yPos>5) { 
 
     nav.style.width = '100%'; 
 
     nav.style.margin = '0'; 
 
     nav.style.position = 'fixed'; 
 
     nav.style.top = '0'; 
 
    }else { 
 
     nav.style.width = '4em'; 
 
     nav.style.margin = "8em auto"; 
 
     nav.style.position = 'static'; 
 
     nav.style.top = 'auto'; 
 
    } 
 
} 
 
window.addEventListener("scroll",yScroll);

* { 
 
    margin: 0em; 
 
    padding: 0em; 
 
} 
 
    
 
#nav { 
 
    margin: 8em auto; 
 
    width: 4em; 
 
    height: 4em; 
 
    background-color: grey; 
 
    transition: width 1s ease-in-out, margin 1s ease-in-out; 
 
} 
 
    
 
section.height { 
 
    height: 100em; 
 
}

<!DOCTYPE html> 
 
<html lang="eng"> 
 
    <head> 
 
    <title>animate</title> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script type="text/javascript" src="animate.js"></script> 
 
    </head> 
 
    <body> 
 
    <div id="nav"> 
 
    </div> 
 
    <section class="height"></section> 
 
    </body> 
 
</html>

Oben ist der Code, den ich für meine Prüfung geschrieben habe leider sein Ausgang von links Ich will es von der Mitte gehen

Quelle

2016-08-26 Mohammed Hassan

DBS weiter die Straße hinunter stieß ich auf ein anderes Problem auf das frühere Problem im Zusammenhang aber nicht wissen, wie es weitergeht mit diesem so eine andere Frage gestellt. Wenn Sie so freundlich wären, es zu überprüfen, wäre ich sehr dankbar. –

ich die Methode der Zentrierung auf geändert habe nach links Verwenden Sie left: 50%; transform: translateX(-50%);, die korrekt für feste Elemente funktioniert (Die Verwendung von Rand Auto auf beiden Seiten funktioniert nicht für Elemente mit fester Position)

Die Änderungen bleiben auch als fixed ein nd entfernen Sie die automatischen Ränder.

function yScroll() { 
 
    var nav,yPos; 
 
    nav = document.getElementById('nav'); 
 
    yPos = window.pageYOffset; 
 
    if(yPos>5) { 
 
     nav.style.width = '100%'; 
 
     nav.style.margin = '0'; 
 
     nav.style.top = '0'; 
 
     nav.style.borderRadius = "0"; 
 
    }else { 
 
     nav.style.width = '4em'; 
 
     nav.style.margin = "8em 0"; 
 
     nav.style.top = 'auto'; 
 
     nav.style.borderRadius = "6px"; 
 
    } 
 
} 
 
window.addEventListener("scroll",yScroll);

#nav { 
 
    position: fixed; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    margin: 8em 0; 
 
    width: 4em; 
 
    height: 4em; 
 
    background-color: grey; 
 
    border-radius: 6px; 
 
    transition: width 1s ease-in-out, margin 1s ease-in-out; 
 
} 
 
    
 
section.height { 
 
    height: 100em; 
 
}

<!DOCTYPE html> 
 
<html lang="eng"> 
 
    <head> 
 
    <title>animate</title> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script type="text/javascript" src="animate.js"></script> 
 
    </head> 
 
    <body> 
 
    <div id="nav"> 
 
    </div> 
 
    <section class="height"></section> 
 
    </body> 
 
</html>

Quelle

2016-08-26 16:12:08 DBS

ja das ist, was ich mir erhofft hatte. Der Code funktioniert großartig. Kannst du noch eine Sache für mich auschecken? Ich habe versucht, abgerundete Grenzen zu #nav zu geben und zu entfernen, aber funktioniert nicht mit Javascript. schätze deinen Helfer. Danke –

Ich habe abgerundete Ecken hinzugefügt, wenn dies Ihnen hilft oder Ihr Problem löst, können Sie es upvote oder akzeptieren Sie es als die richtige Antwort :) – DBS

die Position Einstellung entfernen und beim Herunter Scrollen, stellen Sie den Rand auf "0 Auto" statt "0" gesetzt.

function yScroll() { 
 
    var nav,yPos; 
 
    nav = document.getElementById('nav'); 
 
    yPos = window.pageYOffset; 
 
    if(yPos>5) { 
 
     nav.style.width = '100%'; 
 
     nav.style.margin = '0 auto'; 
 
     nav.style.top = '0'; 
 
    }else { 
 
     nav.style.width = '4em'; 
 
     nav.style.margin = "8em auto"; 
 
     nav.style.top = 'auto'; 
 
    } 
 
} 
 
window.addEventListener("scroll",yScroll);

* { 
 
    margin: 0em; 
 
    padding: 0em; 
 
} 
 
    
 
#nav { 
 
    margin: 8em auto; 
 
    width: 4em; 
 
    height: 4em; 
 
    background-color: grey; 
 
    transition: width 1s ease-in-out, margin 1s ease-in-out; 
 
} 
 
    
 
section.height { 
 
    height: 100em; 
 
}

<!DOCTYPE html> 
 
<html lang="eng"> 
 
    <head> 
 
    <title>animate</title> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script type="text/javascript" src="animate.js"></script> 
 
    </head> 
 
    <body> 
 
    <div id="nav"> 
 
    </div> 
 
    <section class="height"></section> 
 
    </body> 
 
</html>

Quelle

2016-08-26 16:14:52 depiction

css Übergang mit reinem Javascript

Antwort

Verwandte Themen