滚动回div元素后不出现

时间：2019-11-09 17:43:55

标签： javascript jquery html css scroll

我在一个网站上工作，并使用了HTML5 UP中的Massively模板。该网站的一部分中，一旦用户滚动，他们便使用滚动和其他元素来隐藏div容器，这确实具有很好的效果，但是不幸的是，一旦我滑过有问题的容器并向上滚动回到该容器，它就不会不会再出现，并在以前的信息留有空白。

我确定了3个可能与问题有关的文件。没有出现的容器称为intro：

base.html 

{% load static %}
<!DOCTYPE HTML>
<!--
    Massively by HTML5 UP
    html5up.net | @ajlkn
    Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
    <style>
    {% block style %}
    {% endblock style %}
    </style>
    <head>
        {% block head%}
        {% endblock head %}
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <link rel="shortcut icon" type="image/png" href="{% static 'exchange/images/AstusNoBackground.png' %}"/>
        <link rel="stylesheet" type="text/css" href="{% static 'exchange/assets/css/main.css' %}" />
        <noscript><link rel="stylesheet" type="text.css" href="{% static 'exchange/assets/css/noscript.css' %}" /></noscript>
    </head>

    <body class="is-preload">
        <div id="wrapper">

            {% block intro %}
            {% endblock intro %}

            <!--Bouton pour retourner à l'accueil
            <header id="header">
            </header>
            -->
            <!--Barre de navigation-->
            <nav id="nav">
                <ul class="links">
                    <li class="accueil">
                        <a href="/exchange/accueil">
                            <img id="home-icon-desktop" src="{% static 'exchange/images/HomeIconWhite.png' %}" style="height:3em;margin-top:15px;"></img> <!-- 1em = 16px -->
                            <!-- <img id="home-icon-mobile" src="{% static 'exchange/images/HomeIconBlack.png' %}" style="height:3em;margin-top:15px;"></img> --> <!-- 1em = 16px -->
                            <!--Ajouter "margin-right: 1em;" dans style si on décommente les lignes suivantes-->
                            <!--
                            <span style="float:right; display: block; align: middle;">
                                <span>Accueil</span>
                            </span>
                            -->
                        </a>
                    </li>
                    <li><a href="/exchange/recherche_avance">Recherche avancée</a></li>
                    <li><a href="/exchange/rajouter">Ajouter une info</a></li>
                    <!--
                    {% if user.is_authenticated %}
                    <li><a href="/exchange/logout">Déconnexion</a></li>
                    {% else %}
                    <li><a href="/exchange/login">Connexion</a></li>
                    {% endif %}
                    -->
                </ul>
            </nav>

            <!--Main = gros rectangle blanc-->
            <div id="main">
                {% block main %}
                {% endblock main %}
            </div>

            <!--Bas de page-->
            <div id="copyright">
                <ul><li>&copy; Astus International</li><li>Design: <a href="https://html5up.net">HTML5 UP</a></li></ul>
            </div>

        </div>

        <!-- Scripts -->
        <script src="{% static 'exchange/assets/js/jquery.min.js' %}"></script>
        <script src="{% static 'exchange/assets/js/jquery.scrollex.min.js' %}"></script>
        <script src="{% static 'exchange/assets/js/jquery.scrolly.min.js' %}"></script>
        <script src="{% static 'exchange/assets/js/browser.min.js' %}"></script>
        <script src="{% static 'exchange/assets/js/breakpoints.min.js' %}"></script>
        <script src="{% static 'exchange/assets/js/util.js' %}"></script>
        <script src="{% static 'exchange/assets/js/main.js' %}"></script>
        <script src="{% static 'exchange/assets/js/jquery3.min.js' %}"></script>
        <script src="{% static 'exchange/assets/js/jquery.rateyo.js' %}"></script>
        <script>
        {% block scripts %}
        {% endblock scripts %}
        </script>
    </body>
</html>

accueil.html 

{% extends 'exchange/base.html' %}
{% load static %}

{% block style %}
#map {
width: 100%;
height: 600px;
}
{% endblock style %}

{% block head %}
<title>ASTUS - Echange International</title>
<link rel="stylesheet" type="text/css" href="{% static 'exchange/assets/css/MarkerCluster.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'exchange/assets/css/MarkerCluster.Default.css' %}" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"
    integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ=="
    crossorigin="" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet-src.js"
    integrity="sha512-WXoSHqw/t26DszhdMhOXOkI7qCiv5QWXhH9R7CgvgZMHz1ImlkVQ3uNsiQKu5wwbbxtPzFXd1hK4tzno2VqhpA=="
    crossorigin=""></script>
<script type='text/javascript' src="{% static 'exchange/assets/js/jquery2.min.js' %}"></script>
<script type='text/javascript' src="{% static 'exchange/assets/js/leaflet.markercluster.js' %}"></script>
{% endblock head %}

{% block intro %}
<div id="intro" style="min-height: 0vh;">
    <h1>échange<br />
        Universitaire</h1>
    <p>"Le plus beau voyage, c'est celui qu'on n'a pas encore fait" ~ Anonyme</p>
    <ul class="actions">
        <li><a href="#nav" class="button icon solo fa-arrow-down scrolly">Continue</a></li>
    </ul>
</div>
{% endblock intro %}

{% block main %}
<header class="major">
    <h2>Carte interactive</h2>
</header>

<div id="map" height="20rem">

</div>

<div>
    <p style="text-align:center;">
        <img src="{% static 'exchange/images/attention.png' %}" width="25" height="25">
        La majorité des informations de ce site sont basées sur les avis/expériences des élèves partis en échange les
        années précédentes. Elles peuvent changer d'une année à l'autre, donc n'hésitez pas à chercher des informations
        en plus ! Ce site sert principalement à vous aider pour vous faire une première idée quant à votre échange
        universitaire.
        <img src="{% static 'exchange/images/attention.png' %}" width="25" height="25">
    </p>
</div>

{% endblock main %}

{% block scripts %}
// INITIALISATION

// universités + coordonées + metriques / par continent
var universiteParContinent = [];
var universiteAS = [];
var universiteAF = [];
var universiteAdN = [];
var universiteAdS = [];
var universiteEU = [];
var universiteOC = [];

// On met les infos dans chaques tableau
{% for o in Univ_list %}
{% if o.City.Country.Continent == 'AS' %}
universiteAS.push(
["{{o.Name}}",parseFloat("{{o.Lat}}".replace(',','.')),parseFloat("{{o.Long}}".replace(',','.')),"{{o.RankMetric}}","{{o.LifeMetric}}",parseInt("{{o.ID}}")]
)
{% elif o.City.Country.Continent == 'AF' %}
universiteAF.push(
["{{o.Name}}",parseFloat("{{o.Lat}}".replace(',','.')),parseFloat("{{o.Long}}".replace(',','.')),"{{o.RankMetric}}","{{o.LifeMetric}}",parseInt("{{o.ID}}")]
)
{% elif o.City.Country.Continent == 'AdN' %}
universiteAdN.push(
["{{o.Name}}",parseFloat("{{o.Lat}}".replace(',','.')),parseFloat("{{o.Long}}".replace(',','.')),"{{o.RankMetric}}","{{o.LifeMetric}}",parseInt("{{o.ID}}")]
)
{% elif o.City.Country.Continent == 'AdS' %}
universiteAdS.push(
["{{o.Name}}",parseFloat("{{o.Lat}}".replace(',','.')),parseFloat("{{o.Long}}".replace(',','.')),"{{o.RankMetric}}","{{o.LifeMetric}}",parseInt("{{o.ID}}")]
)
{% elif o.City.Country.Continent == 'EU' %}
universiteEU.push(
["{{o.Name}}",parseFloat("{{o.Lat}}".replace(',','.')),parseFloat("{{o.Long}}".replace(',','.')),"{{o.RankMetric}}","{{o.LifeMetric}}",parseInt("{{o.ID}}")]
)
{% elif o.City.Country.Continent == 'OC' %}
universiteOC.push(
["{{o.Name}}",parseFloat("{{o.Lat}}".replace(',','.')),parseFloat("{{o.Long}}".replace(',','.')),"{{o.RankMetric}}","{{o.LifeMetric}}",parseInt("{{o.ID}}")]
)
{% endif %}
{% endfor %}

//on rassemble tout les tableaux dans un seul
universiteParContinent.push(universiteAS,universiteAF,universiteAdN,universiteAdS,universiteEU,universiteOC)

// LA CARTE
// initialize the map object, passing it the id of the div where we want the map to go
var map = L.map("map").setView([0, 0], 2);

//Creer un 'tile layer' contenant la carte
var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    minZoom: 2,
    maxZoom: 18,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Points &copy 2012 LINZ'
}).addTo(map);

// add this tile layer to the map we just created
map.addLayer(tiles);

//METTRE LES MARKERS SUR CARTE
for(var j=0; j<universiteParContinent.length; j++){ 
    var markers=new L.MarkerClusterGroup({ 
        showCoverageOnHover: false,
    }); 
    universities=universiteParContinent[j]; 
    for (var i=0; i < universities.length; i++) { 
        var a=universities[i]; 
        var title=a[0]; 
        var marker=L.marker(new L.LatLng(a[1], a[2]), { title: title }); 

        var rank=parseFloat(a[3].replace(/(\d),(?=\d)/g, '$1.' )); 
        if (rank !=-1) { 
            rank=Math.ceil(rank*2)/2; 
        } 

        var life=parseFloat(a[4].replace(/(\d),(?=\d)/g, '$1.' )); 
        if (life !=-1) { 
            life=Math.ceil(life*2)/2; 
        } 

        var imageRank=""; // Choix image pour Ranking 
        var imageLife="" ; // Choix image pour Qualité de Vie 

        switch(rank){ 
            case 0.5:
                imageRank='<img src="{% static 'exchange/images/HalfStarVotedRed.png' %}" style="height:12px;width:60px;"></img>' ;
                break; 
            case 1:
                imageRank='<img src="{% static 'exchange/images/OneStarVotedRed.png' %}" style="height:12px;width:60px;"></img>' ;
                break; 
            case 1.5:
                imageRank='<img src="{% static 'exchange/images/OneHalfStarVotedRed.png' %}" style="height:12px;width:60px;"></img>';
                break; 
            case 2:
                imageRank='<img src="{% static 'exchange/images/TwoStarVotedOrange.png' %}" style="height:12px;width:60px;"></img>'; 
                break; 
            case 2.5:
                imageRank='<img src="{% static 'exchange/images/TwoHalfStarVotedOrange.png' %}" style="height:12px;width:60px;"></img>';
                break; 
            case 3:
                imageRank='<img src="{% static 'exchange/images/ThreeStarVotedOrange.png' %}" style="height:12px;width:60px;"></img>';
                break; 
            case 3.5:
                imageRank='<img src="{% static 'exchange/images/ThreeHalfStarVotedGreen.png' %}" style="height:12px;width:60px;"></img>';
                break; 
            case 4:
                imageRank='<img src="{% static 'exchange/images/FourStarVotedGreen.png' %}" style="height:12px;width:60px;"></img>';
                break; 
            case 4.5:
                imageRank='<img src="{% static 'exchange/images/FourHalfStarVotedGreen.png' %}" style="height:12px;width:60px;"></img>';
                break; 
            case 5:
                imageRank='<img src="{% static 'exchange/images/FiveStarVotedGreen.png' %}" style="height:12px;width:60px;"></img>';
                break; 
            default:
                imageRank='<img src="{% static 'exchange/images/FiveStarNotVoted.png' %}" style="height:12px;width:60px;"></img>' ;
                break; 
        } 
        switch(life){ 
            case 0.5:
                imageLife='<img src="{% static 'exchange/images/HalfStarVotedRed.png' %}" style="height:12px;width:60px;"></img>' ;
                break; 
            case 1:
                imageLife='<img src="{% static 'exchange/images/OneStarVotedRed.png' %}" style="height:12px;width:60px;"></img>' ;
                break; 
            case 1.5:
                imageLife='<img src="{% static 'exchange/images/OneHalfStarVotedRed.png' %}" style="height:12px;width:60px;"></img>';
                break; 
            case 2:
                imageLife='<img src="{% static 'exchange/images/TwoStarVotedOrange.png' %}" style="height:12px;width:60px;"></img>';
                break; 
            case 2.5:
                imageLife='<img src="{% static 'exchange/images/TwoHalfStarVotedOrange.png' %}" style="height:12px;width:60px;"></img>';
                break; 
            case 3:
                imageLife='<img src="{% static 'exchange/images/ThreeStarVotedOrange.png' %}" style="height:12px;width:60px;"></img>';
                break; 
            case 3.5:
                imageLife='<img src="{% static 'exchange/images/ThreeHalfStarVotedGreen.png' %}" style="height:12px;width:60px;"></img>';
                break; 
            case 4:
                imageLife='<img src="{% static 'exchange/images/FourStarVotedGreen.png' %}" style="height:12px;width:60px;"></img>';
                break; 
            case 4.5:
                imageLife='<img src="{% static 'exchange/images/FourHalfStarVotedGreen.png' %}" style="height:12px;width:60px;"></img>';
                break; 
            case 5:
                imageLife='<img src="{% static 'exchange/images/FiveStarVotedGreen.png' %}" style="height:12px;width:60px;"></img>';
                break; 
            default:
                imageLife='<img src="{% static 'exchange/images/FiveStarNotVoted.png' %}" style="height:12px;width:60px;"></img>' ;
                break; 
        }

        marker.bindPopup('<div style="text-align:center;">' +
        '<span style="font-size:13px;margin:0;padding:0;">' + title + '</span><br />' +
        '<span style="font-size:13px;margin:0;padding:0;">Ranking: </span>' + imageRank + '<br />' +
        '<span style="font-size:13px;margin:0;padding:0;">Qualité de vie: </span>' + imageLife + '<br />' +
        '<a href=/exchange/universite/'+a[5]+' style="font-size:13px;margin:0;padding:0;">Cliquez ici</a>' +
        '</div>'); //quand on clique (metter info plus url avec href accolade)

        markers.addLayer(marker);
    }
    map.addLayer(markers);
}

{% endblock scripts %}

main.js 

/*
    Massively by HTML5 UP
    html5up.net | @ajlkn
    Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

(function($) {

    var $window = $(window),
        $body = $('body'),
        $wrapper = $('#wrapper'),
        $header = $('#header'),
        $nav = $('#nav'),
        $main = $('#main'),
        $navPanelToggle, $navPanel, $navPanelInner;

    // Breakpoints.
        breakpoints({
            default:   ['1681px',   null       ],
            xlarge:    ['1281px',   '1680px'   ],
            large:     ['981px',    '1280px'   ],
            medium:    ['737px',    '980px'    ],
            small:     ['481px',    '736px'    ],
            xsmall:    ['361px',    '480px'    ],
            xxsmall:   [null,       '360px'    ]
        });

    /**
     * Applies parallax scrolling to an element's background image.
     * @return {jQuery} jQuery object.
     */
    $.fn._parallax = function(intensity) {

        var $window = $(window),
            $this = $(this);

        if (this.length == 0 || intensity === 0)
            return $this;

        if (this.length > 1) {

            for (var i=0; i < this.length; i++)
                $(this[i])._parallax(intensity);

            return $this;

        }

        if (!intensity)
            intensity = 0.25;

        $this.each(function() {

            var $t = $(this),
                $bg = $('<div class="bg"></div>').appendTo($t),
                on, off;

            on = function() {

                $bg
                    .removeClass('fixed')
                    .css('transform', 'matrix(1,0,0,1,0,0)');

                $window
                    .on('scroll._parallax', function() {

                        var pos = parseInt($window.scrollTop()) - parseInt($t.position().top);

                        $bg.css('transform', 'matrix(1,0,0,1,0,' + (pos * intensity) + ')');

                    });

            };

            off = function() {

                $bg
                    .addClass('fixed')
                    .css('transform', 'none');

                $window
                    .off('scroll._parallax');

            };

            // Disable parallax on ..
                if (browser.name == 'ie'            // IE
                ||  browser.name == 'edge'          // Edge
                ||  window.devicePixelRatio > 1     // Retina/HiDPI (= poor performance)
                ||  browser.mobile)                 // Mobile devices
                    off();

            // Enable everywhere else.
                else {

                    breakpoints.on('>large', on);
                    breakpoints.on('<=large', off);

                }

        });

        $window
            .off('load._parallax resize._parallax')
            .on('load._parallax resize._parallax', function() {
                $window.trigger('scroll');
            });

        return $(this);

    };

    // Play initial animations on page load.
        $window.on('load', function() {
            window.setTimeout(function() {
                $body.removeClass('is-preload');
            }, 100);
        });

    // Scrolly.
        $('.scrolly').scrolly();

    // Background.
        $wrapper._parallax(0.925);

    // Nav Panel.

        // Toggle.
            $navPanelToggle = $(
                '<a href="#navPanel" id="navPanelToggle">Menu</a>'
            )
                .appendTo($wrapper);

            // Change toggle styling once we've scrolled past the header.
                $header.scrollex({
                    bottom: '5vh',
                    enter: function() {
                        $navPanelToggle.removeClass('alt');
                    },
                    leave: function() {
                        $navPanelToggle.addClass('alt');
                    }
                });

        // Panel.
            $navPanel = $(
                '<div id="navPanel">' +
                    '<nav>' +
                    '</nav>' +
                    '<a href="#navPanel" class="close"></a>' +
                '</div>'
            )
                .appendTo($body)
                .panel({
                    delay: 500,
                    hideOnClick: true,
                    hideOnSwipe: true,
                    resetScroll: true,
                    resetForms: true,
                    side: 'right',
                    target: $body,
                    visibleClass: 'is-navPanel-visible'
                });

            // Get inner.
                $navPanelInner = $navPanel.children('nav');

            // Move nav content on breakpoint change.
                var $navContent = $nav.children();

                breakpoints.on('>medium', function() {

                    // NavPanel -> Nav.
                        $navContent.appendTo($nav);

                    // Flip icon classes.
                        $nav.find('.icons, .icon')
                            .removeClass('alt');

                });

                breakpoints.on('<=medium', function() {

                    // Nav -> NavPanel.
                        $navContent.appendTo($navPanelInner);

                    // Flip icon classes.
                        $navPanelInner.find('.icons, .icon')
                            .addClass('alt');

                });

            // Hack: Disable transitions on WP.
                if (browser.os == 'wp'
                &&  browser.osVersion < 10)
                    $navPanel
                        .css('transition', 'none');

    // Intro.
        var $intro = $('#intro');

        if ($intro.length > 0) {

            // Hack: Fix flex min-height on IE.
                if (browser.name == 'ie') {
                    $window.on('resize.ie-intro-fix', function() {

                        var h = $intro.height();

                        if (h > $window.height())
                            $intro.css('height', 'auto');
                        else
                            $intro.css('height', h);

                    }).trigger('resize.ie-intro-fix');
                }

            // Hide intro on scroll (> small).
                breakpoints.on('>small', function() {

                    $main.unscrollex();

                    $main.scrollex({
                        mode: 'bottom',
                        top: '25vh',
                        bottom: '-50vh',
                        enter: function() {
                            $intro.addClass('hidden');
                        },
                        leave: function() {
                            $intro.removeClass('hidden');
                        }
                    });

                });

            // Hide intro on scroll (<= small).
                breakpoints.on('<=small', function() {

                    $main.unscrollex();

                    $main.scrollex({
                        mode: 'middle',
                        top: '15vh',
                        bottom: '-15vh',
                        enter: function() {
                            $intro.addClass('hidden');
                        },
                        leave: function() {
                            $intro.removeClass('hidden');
                        }
                    });

            });

        }

})(jQuery);

为了清楚地表达我正在努力解决的问题，这里有3张图片，显示了正在发生的事情：

Initial site launch

Scroll to nav container

Scroll back to top of page

请注意，尽管我怀疑这对我的问题有影响，但该网站是使用Django框架创建的。请告诉我是否需要更多信息来帮助我解决此问题。

0 个答案:

没有答案
相关问题
最新问题