versteckte Fußzeile erscheint allmählich auf Scroll

Ich versuche, diesen Effekt an einem Projektversteckte Fußzeile erscheint allmählich auf Scroll

wie diese Seite der Fußzeile versteckt zu machen ist, und erscheint wie Sie blättern. Die Seite ist in ein Seiteninhaltselement eingebettet und die Fußzeile ist am unteren z-indexiert 0 was passiert, wenn Sie am Ende des Fensters den Seiteninhalt-Rand erreicht, während Sie scrollen. Ich kann nicht wirklich einen Weg finden, es mit j zu tun Frage

Quelle

2017-04-02 Animal Kingdom

Hier ist ein Beispiel, Sie positionieren es einfach auf der Unterseite der Seite oder an einem anderen Ort, den Sie wollen, um es zu verbergen, können Sie es verwende z-index = -1;

//<br><br><br><br><br><br><br><br><br> 
<h2><code>fixed</code></h2> 
<div class="fixed"><div class="expand"></div></div> 

<br><br><br><br><br><br><br><br>

CSS

@import "compass/css3"; 

h2 { 
    text-align: center; 
    margin-top: 48px; 
} 

div { 
    height: 200px; 
    width: 50%; 
    max-width: 600px; 
    margin: 32px auto; 
    overflow-x: hidden; 
// overflow-y: scroll; 
} 

.fixed { 
    background: url('http://lorempixel.com/600/200/animals'); 
    background-attachment: fixed; 
    overflow: hidden; 
} 

.expand { 
    height: 400px; 
    width: 100%; 
}

https://jsfiddle.net/cu01m218/

Quelle

2017-04-04 09:36:36

ich für Sie ein Beispiel tat.

$(function(){ 
 
    
 
    calcFooter(); 
 
    
 
function calcFooter() { 
 
    var footer = $('.footer').height(); 
 
    var mainContent = $('.main-content'); 
 
    
 
    mainContent.css('margin-bottom', footer); 
 
} 
 

 
$(window).resize(calcFooter); 
 
    
 
});

body { 
 
    margin: 0; 
 
} 
 

 
.main-content { 
 
    position: relative; 
 
    z-index: 100; 
 
    height: 100vh; 
 
    background-color: grey; 
 
} 
 
    
 
.footer { 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
    z-index: 10; 
 

 
    height: 200px; 
 
    width: 100%; 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
<div class="wrapper"> 
 
    
 
    <div class="main-content" style="margin-bottom: 200px;"> 
 
    <h1>This is main content.</h1> 
 
    <p>Scroll down to reveal footer!</p> 
 
    </div> 
 
    
 
    <div class="footer"> 
 
    <p>This footer.</p> 
 
    </div> 
 
    
 
</div>

Quelle

2017-09-28 00:01:08 stojkosd

sagen lassen, dass dieses Element, das an der Unterseite Tag ist Fußzeile erscheint. html:

<footer></footer>

in Ihrem CSS: In diesem Fall wird es so etwas wie dieses

footer { 
    position: fixed; 
    bottom: 0; 
    display: none; 
}

Dann müssen Sie eine Klasse hinzufügen, die Fußzeile

erscheinen wird

.active { 

display: block; 

}

und Ihre jquery wird in etwa so aussehen:

$(window).on('scroll', function() { 
    if ($(this).scrollTop() > 50) { 
     if (!$(footer).hasClass('active')) { 
      $(footer).addClass('active'); 
     } 
    } else { 
     if ($(footer).hasClass('active')) { 
      $(footer).removeClass('active'); 
     } 
    } 
});

Quelle

2017-09-28 00:06:36 Genjik

versteckte Fußzeile erscheint allmählich auf Scroll

Antwort

Verwandte Themen