|
|
| Line 1,556: |
Line 1,556: |
| | </style> | | </style> |
| | | | |
| − | <script> | + | |
| − | | + | |
| − | | + | |
| − | function getElementY(query) {
| + | |
| − | return window.pageYOffset + document.querySelector(query).getBoundingClientRect().top
| + | |
| − | }
| + | |
| − | | + | |
| − | function doScrolling(element, duration) {
| + | |
| − | var startingY = window.pageYOffset + 50
| + | |
| − | var elementY = getElementY(element)
| + | |
| − | // If element is close to page's bottom then window will scroll only to some position above the element.
| + | |
| − | var targetY = document.body.scrollHeight - elementY < window.innerHeight ? document.body.scrollHeight - window.innerHeight : elementY
| + | |
| − | var diff = targetY - startingY
| + | |
| − | // Easing function: easeInOutCubic
| + | |
| − | // From: https://gist.github.com/gre/1650294
| + | |
| − | var easing = function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 }
| + | |
| − | var start
| + | |
| − | | + | |
| − | if (!diff) return
| + | |
| − | | + | |
| − | // Bootstrap our animation - it will get called right before next frame shall be rendered.
| + | |
| − | window.requestAnimationFrame(function step(timestamp) {
| + | |
| − | if (!start) start = timestamp
| + | |
| − | // Elapsed miliseconds since start of scrolling.
| + | |
| − | var time = timestamp - start
| + | |
| − | // Get percent of completion in range [0, 1].
| + | |
| − | var percent = Math.min(time / duration, 1)
| + | |
| − | // Apply the easing.
| + | |
| − | // It can cause bad-looking slow frames in browser performance tool, so be careful.
| + | |
| − | percent = easing(percent)
| + | |
| − | | + | |
| − | window.scrollTo(0, startingY + diff * percent - 50)
| + | |
| − | | + | |
| − | // Proceed with animation as long as we wanted it to.
| + | |
| − | if (time < duration) {
| + | |
| − | window.requestAnimationFrame(step)
| + | |
| − | }
| + | |
| − |
| + | |
| − | })
| + | |
| − | console.log(elementY)
| + | |
| − | }
| + | |
| − | | + | |
| − | // Apply event handlers. Example of firing the scrolling mechanism.
| + | |
| − | document.getElementById('to1').addEventListener('click', doScrolling.bind(null, '#primer', 1000))
| + | |
| − | document.getElementById('to2').addEventListener('click', doScrolling.bind(null, '#segundo', 1000))
| + | |
| − | document.getElementById('to3').addEventListener('click', doScrolling.bind(null, '#tercero', 1000))
| + | |
| − | document.getElementById('to4').addEventListener('click', doScrolling.bind(null, '#cuarto', 1000))
| + | |
| − | document.getElementById('to5').addEventListener('click', doScrolling.bind(null, '#quinto', 1000))
| + | |
| − | </script>
| + | |
| | <script> | | <script> |
| | $(window).scroll(function(){ | | $(window).scroll(function(){ |
| − | if($(document).scrollTop() > 650){ | + | |
| − | document.querySelector(".menu_lateral").classList.add("menu_lateral_hidden");
| + | |
| − | }else{
| + | |
| − | document.querySelector(".menu_lateral").classList.remove("menu_lateral_hidden");
| + | |
| − | }
| + | |
| − |
| + | |
| | if($(document).scrollTop() > 650){ | | if($(document).scrollTop() > 650){ |
| | document.querySelector(".tips").classList.remove("tips_hidden"); | | document.querySelector(".tips").classList.remove("tips_hidden"); |
| Line 1,620: |
Line 1,567: |
| | }); | | }); |
| | </script> | | </script> |
| − | <script>
| |
| − | $(window).scroll(function(){
| |
| − | var f = $(document).scrollTop();
| |
| − | var pri = getElementY("#primer")-52
| |
| − | var seg = getElementY("#segundo")-52;
| |
| − | var ter = getElementY("#tercero")-52;
| |
| − | var cuar = getElementY("#cuarto")-52;
| |
| − | var quin = getElementY("#quinto")-52;
| |
| − | var final = getElementY("#final")-250;
| |
| − | if(f >= pri){
| |
| − | if(f >= seg){
| |
| − | if(f >= ter){
| |
| − | if(f >= cuar){
| |
| − | if(f>=quin){
| |
| − | if(f>=final){
| |
| − | document.querySelector(".menu_lateral").classList.remove("menu_lateral_hidden");
| |
| − | console.log("Debería de esconderlo");
| |
| − | }else{
| |
| − | console.log("quinta");
| |
| − | document.querySelector("#to5").classList.add("sobresalirmenu");
| |
| − | document.querySelector("#to4").classList.remove("sobresalirmenu");
| |
| − | }
| |
| − | //.sobresalirmenu
| |
| − | }else{
| |
| − | console.log("cuarta");
| |
| − | document.querySelector("#to3").classList.remove("sobresalirmenu");
| |
| − | document.querySelector("#to4").classList.add("sobresalirmenu");
| |
| − | document.querySelector("#to5").classList.remove("sobresalirmenu");
| |
| − | }
| |
| − | }else{
| |
| − | console.log("tercera");
| |
| − | document.querySelector("#to3").classList.add("sobresalirmenu");
| |
| − | document.querySelector("#to2").classList.remove("sobresalirmenu");
| |
| − | document.querySelector("#to4").classList.remove("sobresalirmenu");
| |
| − | }
| |
| − | }else{
| |
| − | console.log("Segunda");
| |
| − | document.querySelector("#to2").classList.add("sobresalirmenu");
| |
| − | document.querySelector("#to3").classList.remove("sobresalirmenu");
| |
| − | document.querySelector("#to1").classList.remove("sobresalirmenu");
| |
| − | }
| |
| − | }else{
| |
| − | console.log("Primera sección");
| |
| − | document.querySelector("#to1").classList.add("sobresalirmenu");
| |
| − | document.querySelector("#to2").classList.remove("sobresalirmenu");
| |
| − | }
| |
| − | }
| |
| − | if(f>=650){
| |
| − | if(f<=seg){
| |
| − | document.querySelector(".tips").classList.add("tips_hidden");
| |
| − | }else{
| |
| − | document.querySelector(".tips").classList.remove("tips_hidden");
| |
| − | }
| |
| − | }else{
| |
| − | document.querySelector(".tips").classList.remove("tips_hidden");
| |
| − | }
| |
| − | });
| |
| | | | |
| − | </script>
| |
| | | | |
| | </html> | | </html> |
