सीएसएस - क्लिक पर एक div को स्लाइड करें जो

से पहले दिखाई नहीं दे रहा है मेरे पास एक पृष्ठ का fiddle है जहां मैं scrollTop को .panel-two पर एनिमेट करने के लिए एक क्लिक क्लिक ईवेंट चाहता हूं। मैंने कुछ jQuery प्लगइन्स की कोशिश की है लेकिन कुछ भी काम नहीं किया है। मेरी समस्या यह है कि यदि मैं div दिखाई नहीं दे रहा हूं और scrollIntoView को एनिमेट नहीं कर सकता तो मैं scrollTop का उपयोग नहीं कर सकता।सीएसएस - क्लिक पर एक div को स्लाइड करें जो

<body> 

    <!-- Close button --> 
    <button class="close-button" aria-label="Close menu" type="button" data-close> 
    <span aria-hidden="true">&times;</span> 
    </button> 

    <div class="off-canvas position-left" id="offCanvas" data-off-canvas> 
    <!-- Menu --> 
    <ul class="vertical menu"> 
     <li><a href="#">Foundation</a></li> 
     <li><a href="#">Dot</a></li> 
     <li><a href="#">ZURB</a></li> 
     <li><a href="#">Com</a></li> 
     <li><a href="#">Slash</a></li> 
     <li><a href="#">Sites</a></li> 
    </ul> 
    </div> 

    <div id="bg"> 
    </div> 
    <div class="panel panel-one"> 
    <div class="panel-inner"> 
     <div class="content"> 
     <h1>Lorem ipsum dolor sit amet</h1> 
     <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit 
      ligula pharetra.</p> 
     </div> 
    </div> 
    </div> 

    <div class="panel panel-two"> 
    <div class="panel-inner"> 
     <h2>Lorem ipsum dolor sit amet</h2> 
     <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit 
     ligula pharetra.</p> 
    </div> 
    </div> 

</body>

मैं छवियों के साथ .panel-one div में एक स्लाइडर के लिए जहां एक छवि के एक क्लिक तो जुड़े div स्क्रीन पर कब्जा करने के लिए ऊपर स्क्रॉल होगा योजना बना रहा हूँ:

यह एचटीएमएल है।

.panel-one div को पूरी स्क्रीन पर ले जाने की आवश्यकता है और उपयोगकर्ता को स्क्रॉल करने में सक्षम नहीं होना चाहिए। केवल एक बार .panel-two div एक छवि के एक क्लिक पर फिसल गया है, तो उपयोगकर्ता को फिर से .panel-one div प्रकट करने के लिए स्क्रॉल करने में सक्षम होना चाहिए। .panel-two फिर स्क्रीन के नीचे गायब होना चाहिए।

स्रोत

2016-10-31 Leff

अब panel-one के शीर्ष तक एक बार उपयोगकर्ता स्क्रॉल स्क्रॉलबार को छिपाने के लिए एक scroll श्रोता जोड़ने मैं नहीं समझता कि आपका लक्ष्य क्या है। क्या आप किसी प्रकार का "स्क्रॉल डाउन"/"अधिक देखें" बटन बनाना चाहते हैं जो पृष्ठ को अगले अनुभाग/div/panel पर स्क्रॉल करेगा? – Buksy

क्षमा करें, मैं मदद करना चाहता हूं लेकिन मुझे समझ में नहीं आता कि आप क्या हासिल करने की कोशिश कर रहे हैं। क्या आपने कोई कामकाजी उदाहरण देखा है जिसे आप हमें दिखा सकते हैं? – zJorge

हो सकता है कि इस सवाल का जवाब थोड़ी देर हो चुकी है, लेकिन मुझे लगता है कि इस में मदद मिलेगी आप छवि स्लाइडर panel-one पर में डाल दिया है:

सबसे पहले मैं स्क्रॉलबार छिपाने:
```
$('body').css('overflow', 'hidden'); 
```

पर panel-one क्लिक करें, आप panel-two को चेतन कर सकते हैं:

$(".panel-one").on('click', function() { 
    $('html, body').animate({ 
    scrollTop: $('.panel-two').offset().top 
    }, 1000, function() { 
    $('body').css('overflow', 'auto'); 
}); 
});

एनीमेशन के अंत में overflow पर स्विच करना भी नहीं भूल रहा है।

$(document).scroll(function() { 
    if ($(window).scrollTop() == 0) 
    $('body').css('overflow', 'hidden'); 
});

डेमो नीचे देखें:

$(".close-button").on('click', function() { 
 
    if ($("#offCanvas").css('margin-left') < '0') { 
 
    $("#offCanvas").css('margin-left', '0'); 
 
    $(".panel").css('margin-left', '50%'); 
 
    $("#bg").css('margin-left', '50%'); 
 
    } else { 
 
    $("#offCanvas").css('margin-left', '-50%'); 
 
    $(".panel").css('margin-left', '0'); 
 
    $("#bg").css('margin-left', '0'); 
 
    } 
 
}); 
 

 
$('body').css('overflow', 'hidden'); 
 

 
$(".panel-one").on('click', function() { 
 
    $('html, body').animate({ 
 
    scrollTop: $('.panel-two').offset().top 
 
    }, 1000, function() { 
 
    $('body').css('overflow', 'auto'); 
 
    }); 
 
}); 
 

 
$(document).scroll(function() { 
 
    if ($(window).scrollTop() == 0) 
 
    $('body').css('overflow', 'hidden'); 
 
});

#offCanvas { 
 
    position: fixed; 
 
    z-index: 999; 
 
    background-color: black; 
 
    width: 50%; 
 
    margin-left: -50%; 
 
    height: 100%; 
 
} 
 
.close-button { 
 
    position: fixed; 
 
    z-index: 1000; 
 
} 
 
#bg { 
 
    background-image: url('https://unsplash.it/500?random'); 
 
    background-size: cover; 
 
    z-index: -1; 
 
    animation: zoom 10s; 
 
    height: 100%; 
 
    width: 100vw; 
 
    position: fixed; 
 
    -webkit-animation-fill-mode: forwards; 
 
    background-attachment: fixed; 
 
} 
 
@keyframes zoom { 
 
    0% { 
 
    transform: scale(1, 1); 
 
    } 
 
    100% { 
 
    transform: scale(1.1, 1.1); 
 
    } 
 
} 
 
html, 
 
body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
.panel { 
 
    position: relative; 
 
    min-height: 100vh; 
 
    width: 100%; 
 
    z-index: 5; 
 
} 
 
.panel-fixed { 
 
    z-index: 1; 
 
} 
 
.panel-inner { 
 
    padding: 1em; 
 
    width: 100%; 
 
} 
 
.panel-fixed .panel-inner { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 2; 
 
} 
 
/* Base */ 
 

 
*, 
 
*:before, 
 
*:after { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.panel-two { 
 
    background-color: blue; 
 
} 
 
.content { 
 
    position: fixed; 
 
} 
 
body { 
 
    overflow-x: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <!-- Close button --> 
 
    <button class="close-button" aria-label="Close menu" type="button" data-close> 
 
    <span aria-hidden="true">&times;</span> 
 
    </button> 
 
    <div class="off-canvas position-left" id="offCanvas" data-off-canvas> 
 
    <!-- Menu --> 
 
    <ul class="vertical menu"> 
 
     <li><a href="#">Foundation</a> 
 
     </li> 
 
     <li><a href="#">Dot</a> 
 
     </li> 
 
     <li><a href="#">ZURB</a> 
 
     </li> 
 
     <li><a href="#">Com</a> 
 
     </li> 
 
     <li><a href="#">Slash</a> 
 
     </li> 
 
     <li><a href="#">Sites</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div id="bg"> 
 
    </div> 
 
    <div class="panel panel-one"> 
 
    <div class="panel-inner"> 
 
     <div class="content"> 
 
     <h1>Lorem ipsum dolor sit amet</h1> 
 
     <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit 
 
      ligula pharetra.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-two"> 
 
    <div class="panel-inner"> 
 
     <h2>Lorem ipsum dolor sit amet</h2> 
 
     <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit 
 
     ligula pharetra.</p> 
 
    </div> 
 
    </div> 
 
</body>

स्रोत

2016-12-02 16:37:43 kukkuz

@Leff मुझे इस उत्तर पर आपके विचार बताएं, धन्यवाद! – kukkuz

सीएसएस - क्लिक पर एक div को स्लाइड करें जो

उत्तर

संबंधित मुद्दे