Taking an intro web design class so my knowledge is very limited. I'm working on a page that is supposed to display modals after clicking on an image. It seems to be working fine except for when they scroll down first then click the modal. When that happens the modal is cut off and doesn't display in the whole page. After some searching, I know Height 100% doesn't work if the user scrolls so is there any way to solve that? Here is my code, apologies if it's not written well, modals haven't been taught in class yet so I had watch some videos on youtube to make this.
Use the main model wrapper position: fixed; height: 100%; width: 100%; and for stopping the scrolling makes body overflow: hidden; as you already did. After close the modal make the body overflow: auto/scroll.
For better understanding use this guideline [ similar to bootstrap 4 ]
document.getElementById('modal-btn').addEventListener('click', function(){
document.querySelector('.modal').classList.add('active');
document.body.classList.add('modal-has-opened');
});
document.getElementById('modal-hide').addEventListener('click', function(){
document.querySelector('.modal').classList.remove('active');
document.body.classList.remove('modal-has-opened');
})
.modal{
position: fixed;
top: 0;
left: 0;
z-index: 9999999999;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
overflow-y: auto;
display: none;
}
.modal.active{
display: block;
}
.modal-content{
width: 80%;
background-color: #fff;
padding: 50px;
border: 1px solid #000;
margin: 1rem auto;
box-sizing: border-box;
}
body{
background-color: #f4f8ff;
font-family: segoe ui;
font-size: 1rem;
line-height: 1.5;
}
.wp{
width: 90%;
margin: 1rem auto;
background-color: #fff;
border: 1px solid #000;
padding: 20px;
box-sizing: border-box;
}
#modal-btn{
padding: .25rem 1.25rem;
font-family: segoe ui;
font-size: 1rem;
line-height: 1.5;
cursor: pointer;
}
#media(max-width: 442px){
.modal-content{
width: 98%;
}
}
.modal-has-opened{
overflow: hidden;
padding-right: 17px !important;
}
<div class="wp">
<div class="title">
I am fine
</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel ipsa hic recusandae dolor. Cumque, ea. Fugiat ratione laudantium blanditiis dolore expedita? Adipisci inventore saepe minus quisquam natus officiis enim! Quia in explicabo aliquid illo voluptate nam laboriosam ad minus voluptas, repellendus provident. Temporibus voluptatum ut quia cum possimus inventore ratione?</p>
<button id="modal-btn">
Open Modal
</button>
</div>
<div class="wp">
<div class="title">
I am fine
</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel ipsa hic recusandae dolor. Cumque, ea. Fugiat ratione laudantium blanditiis dolore expedita? Adipisci inventore saepe minus quisquam natus officiis enim! Quia in explicabo aliquid illo voluptate nam laboriosam ad minus voluptas, repellendus provident. Temporibus voluptatum ut quia cum possimus inventore ratione?</p>
</div>
<!-- Main Modal -->
<div class="modal">
<div class="modal-content">
I am the content
<button id="modal-hide">
Close Modal
</button>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, fugit quo? Illo saepe magni molestias, accusantium molestiae, similique quibusdam officia fuga id adipisci suscipit architecto, omnis quo cum labore fugiat. Facere vel nulla blanditiis, voluptatem animi debitis, asperiores alias error sed tempora cum, architecto quia cumque distinctio sit ab nemo minima eveniet esse possimus deleniti omnis? Modi unde repellat quasi reiciendis suscipit corporis explicabo! Quaerat eveniet, ad iusto commodi officia ea quae dolor, quia architecto quibusdam voluptate autem vero. Eaque quasi temporibus recusandae. Quasi assumenda vero in odio sit neque modi deleniti quaerat laborum. Reiciendis dicta sunt laborum assumenda aliquid cumque sint recusandae temporibus itaque nisi, velit magnam officia inventore, id laboriosam! Aliquam expedita voluptate vel neque aspernatur obcaecati minus, tempora laudantium illum, eveniet totam eum incidunt. Quo consectetur dolorum, aliquid quas dicta quasi nisi soluta eaque earum nostrum exercitationem possimus tempore quisquam distinctio ducimus deleniti modi consequatur quod obcaecati maxime rem. Totam quos nisi natus laudantium nobis culpa fugit aspernatur quis voluptatum consequuntur perferendis incidunt fugiat alias quaerat architecto deserunt at, consequatur dolorum sequi sed, fuga quia! Officia dignissimos non id quam quibusdam ipsam cupiditate laborum blanditiis placeat minus cumque, harum expedita accusantium eligendi quo similique debitis fugiat eius natus? Placeat quis consectetur hic natus quam veritatis earum ipsam minima dolorem molestiae nemo fuga exercitationem vero repudiandae facere delectus autem iste at saepe sapiente, veniam doloremque! Error dolor dolorem cupiditate ab qui doloribus sapiente, cum eaque consectetur debitis aliquid maiores perspiciatis dignissimos officia ea possimus molestias? Earum rerum reiciendis possimus amet, voluptas qui minima velit veniam at consequuntur optio iusto repellat eveniet placeat autem ea, ipsam sunt ab commodi quos maiores. Ad a voluptatem quasi in molestiae expedita dolorem rerum eius id dignissimos neque sunt officia magnam et repellat suscipit, soluta fuga temporibus porro ab omnis nesciunt! Deleniti itaque quae, accusamus reprehenderit minus repellendus cupiditate nihil earum in, dolorem illum nobis excepturi velit ipsam modi dolores praesentium? Necessitatibus doloribus animi aut quos provident iusto reiciendis, asperiores corrupti voluptatem ipsa veniam libero ullam illo iure rem harum laborum porro at, neque, cum maxime tempora? Deleniti cupiditate omnis nesciunt error asperiores delectus quo architecto dolorem ut nostrum. Dolorem blanditiis quos est delectus quo soluta illo officiis, eum rem ad minus corporis optio minima cumque voluptates maiores ipsa quas! At numquam tempora explicabo soluta. Natus perferendis cumque fuga iusto nostrum porro nihil exercitationem incidunt suscipit voluptatum vero, rem molestias, commodi sit, corporis animi aliquid aperiam quam. Blanditiis, minima necessitatibus. Maxime, optio officiis quia commodi consectetur dignissimos omnis accusantium, nesciunt reiciendis illum voluptates id aspernatur officia suscipit, numquam earum recusandae voluptas voluptate eum illo nemo. Ea ipsam laboriosam similique veniam nesciunt labore esse laborum nulla. Laboriosam pariatur ex ipsa assumenda ad soluta alias, explicabo id accusamus nulla non reprehenderit perspiciatis quas nisi. Unde ad voluptatem quis, quo repellendus odit sint tempore non ex, similique architecto dolor. Eius quaerat enim accusamus nobis animi dignissimos earum eaque atque culpa optio esse iusto iure adipisci, deleniti qui voluptate. Dolor velit possimus placeat a quidem commodi quod?
</p>
</div>
</div>
Related
Hello everyone~ I would like to ask that I am currently making a pop-up window, and I have a problem!
It’s because of the excessive content of the website that scrolls will appear when the pop-up window appears, so when the mouse is scrolled, the text behind it will still scroll.
I am a beginner in programming and I don’t know how to prevent scrolls from appearing. Don't let the content of the rear website scroll?
// 點按鈕彈出廣告
$(function(){
$('.js-btn').click(function(){
$('.js-ad').fadeIn();
});
})
// 點關閉按鈕關閉廣告
$(function(){
$('.js-close').click(function(){
$('.js-ad').fadeOut();
});
})
// 點灰色區域關閉廣告，但是藍色區域不關閉
$(function(){
$('.js-ad').click(function(e){
if(e.target.classList.contains('js-ad')){
$(this).fadeOut();
}
})
})
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.btn {
text-decoration: none;
padding: 30px;
background-color: #ee3f4d;
color: #fff;
border-radius: 8px;
transition: 0.5s;
}
.btn:hover {
background-color: #ea1725;
box-shadow: 0px 6px 2px rgba(0, 0, 0, 0.1);
}
.ad {
position: fixed;
justify-content: center;
align-items: center;
display: none;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
z-index: 99999;
}
.card {
width: 300px;
height: 300px;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
background-color: #0f7bff;
color: #fff;
border-radius: 20px;
padding: 10px;
line-height: 2;
}
.card .close {
display: inline-block;
text-decoration: none;
padding: 10px;
background-color: #e5f75b;
color: #222;
border-radius: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
點擊出現廣告視窗
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam inventore et reiciendis id commodi vero dignissimos laborum rem. Unde qui nam quia totam ut dolores. Pariatur debitis a eveniet ipsum voluptatum, maxime corporis praesentium nesciunt labore facere culpa voluptate rerum neque laborum perspiciatis. Officiis mollitia, provident ut aliquid incidunt corporis sapiente id. Architecto dicta ipsam neque dignissimos autem cum quae distinctio assumenda, doloribus nulla numquam corporis beatae quidem voluptatum? Vero consequuntur aperiam inventore fugit odio temporibus reprehenderit voluptate maiores. Magni magnam fugit reprehenderit adipisci explicabo, eius, esse odio tempore modi nihil obcaecati dolorem vel ad veniam labore amet molestiae, nostrum eligendi aliquid. Placeat autem, odio nihil consequuntur dolorem expedita fugiat quae accusamus distinctio sit tempora. Fugit, quidem expedita aspernatur ipsum non praesentium ad harum nemo animi aliquid nulla voluptates ducimus laudantium. Ex, nesciunt autem totam et minima, libero a dicta magnam unde ullam repudiandae! Ab quis tenetur beatae reiciendis, omnis quidem dignissimos, mollitia deleniti a eaque, possimus blanditiis impedit eveniet amet distinctio? Eaque veritatis repudiandae voluptatum. Nobis reiciendis rem, provident autem aliquam deserunt voluptatibus, omnis possimus temporibus, sequi dolorum? Doloribus, obcaecati? Quae ut cupiditate iste nesciunt, ratione quod quis porro ea explicabo dolorem vitae deleniti commodi fugiat sit. Recusandae natus hic magnam dolor aliquam deleniti aperiam quisquam iure, voluptates dolorum nam repudiandae similique temporibus, totam, perspiciatis iusto eum nemo? Quibusdam incidunt culpa officia blanditiis unde debitis, dolore cum perferendis veniam, velit eos. Tempore vel modi pariatur eius saepe nihil necessitatibus hic, fugiat minima qui est id at! Ducimus quaerat veritatis adipisci nemo ut quos ipsum hic architecto, incidunt eveniet laborum eligendi, doloribus quod beatae numquam aspernatur quis porro illum qui, magni maiores natus aliquid. Atque, amet. Repellendus odio eveniet nisi, animi voluptates voluptatum maxime quae consequatur deserunt corporis repellat odit maiores provident alias ipsa earum ipsam! Alias deleniti officiis cumque repellat. Voluptates nemo repellendus cumque suscipit veniam distinctio dolor voluptatem rem debitis, consectetur molestias perferendis neque, impedit quam non ipsa. Corporis ipsa laborum iusto quidem commodi, quas corrupti recusandae officiis qui animi, dolores velit eius dicta ratione iure voluptatibus! Unde voluptatibus praesentium animi. Magnam minus illum nulla repellendus, sapiente, repellat earum illo omnis, maxime quia tenetur consectetur pariatur eos sit deserunt corrupti commodi dolores. Dolore impedit optio nemo quis at, nesciunt consectetur harum cupiditate. Nesciunt voluptatum sequi saepe sit omnis ut at vitae neque, beatae consequatur, sunt modi, voluptas doloremque natus. Eveniet, autem suscipit libero molestias iusto velit accusamus accusantium tenetur vel minus nesciunt, enim unde esse officia omnis. Fugiat dolore rem blanditiis necessitatibus qui, sit eaque corporis labore ipsa placeat fugit dolorum dolores assumenda dolor. Velit, a alias dicta fugiat vitae nisi doloremque amet quisquam natus porro asperiores perferendis nobis illum consequuntur veritatis cupiditate suscipit veniam. Praesentium dignissimos ex debitis nihil, numquam earum ad voluptatibus iste pariatur atque repellat consectetur reprehenderit? Nobis quisquam, sapiente consectetur reprehenderit modi doloremque nulla iste veniam esse recusandae facere ab quo officiis, placeat accusantium, aliquid fugit rerum similique voluptate. Dolorum magni quas sequi corporis architecto, dignissimos cupiditate recusandae! Temporibus suscipit at mollitia odio ipsa! Saepe harum odit esse dolores magnam eos rem quo animi laboriosam. Debitis repudiandae laborum, ex dolores natus dolorum! Rerum nam, sunt corrupti voluptatum quisquam debitis pariatur molestias repudiandae consectetur, rem quae inventore saepe vitae dolor. Repudiandae quas laudantium quo dignissimos ad ea illum delectus, dolorum animi culpa. Impedit dolorem expedita soluta quisquam id consequatur quam esse laborum maxime amet, quae ipsum iusto et nihil voluptas aut magnam laboriosam repudiandae, facere optio architecto officia, quidem ex eos. Doloremque saepe praesentium amet deleniti dolor culpa illo itaque quibusdam, quia, iusto id! Blanditiis fuga deserunt perspiciatis similique nisi ea, sed quia ipsum perferendis dolor porro quibusdam explicabo, itaque quam voluptates laboriosam repudiandae commodi a dolore tempora autem sunt vero? In doloremque voluptas quae, possimus ducimus blanditiis maxime laudantium aliquid ex. Dolor ipsam rerum unde asperiores ipsa fugiat eum. Explicabo quos sequi expedita rerum amet suscipit, possimus non illo accusamus, enim praesentium mollitia rem recusandae pariatur sapiente error. Quod in, aliquid aliquam eum sequi nemo sint, enim facilis cupiditate laboriosam incidunt praesentium atque recusandae laborum sapiente ducimus. Aperiam laboriosam distinctio non velit, itaque a illum blanditiis sequi provident architecto? Dolorum quibusdam laboriosam officia asperiores labore exercitationem ipsa animi odit! Rem saepe nobis tempore quis modi, odit quidem odio. Maxime magni animi ipsum enim vitae, eaque omnis eos, perspiciatis soluta architecto iste? Consequatur maxime sed eaque accusamus expedita. Delectus nam perferendis totam? Error labore voluptate maiores esse. Molestiae, laborum eligendi. Tempora est culpa, hic quas nemo iste numquam doloribus sunt qui dolores nostrum odio fugit labore voluptates modi cupiditate laboriosam odit architecto quasi ullam! Quo laudantium modi aperiam dignissimos harum repellendus? Maiores, rerum praesentium dolor, magni eos, provident officia libero aliquid optio architecto repudiandae nostrum deserunt cum earum accusantium nobis itaque commodi facilis. Eius optio vel adipisci nesciunt iste, quae recusandae sint cumque, corrupti, reprehenderit enim quas maiores totam facere illo labore porro sapiente sed ea quod atque quam. Maxime quidem voluptates error sequi ullam! Ipsa, ex incidunt commodi cupiditate exercitationem modi dicta. Assumenda, earum modi eum commodi officiis architecto quibusdam cumque molestias porro sapiente repellat, sequi dolores, voluptatibus odio. Qui dignissimos numquam repudiandae consequatur corrupti. Sit corrupti beatae vel, labore quam, cum aspernatur aliquam minima tempora commodi velit eveniet nostrum neque necessitatibus sunt ea mollitia porro eligendi, fuga possimus veniam quia. Mollitia magnam minima dolorem ex molestias quis esse vel dolore qui, aut commodi quasi aliquam vitae blanditiis in voluptatibus obcaecati consequatur consequuntur ducimus ipsa facilis illum. Vel laboriosam nihil necessitatibus, incidunt cupiditate nisi corrupti ipsam vero velit accusamus, dolore voluptatibus exercitationem atque. Molestiae necessitatibus error sint. Iusto temporibus error voluptas corrupti tenetur dignissimos mollitia similique aspernatur, quas, ipsam iste voluptate? Adipisci vel animi ea, id aspernatur maiores ipsam labore quia perferendis delectus. Debitis autem praesentium quae, nulla sapiente, cupiditate quo iure dignissimos dolores deserunt magni laudantium nostrum facere earum odio accusantium reprehenderit fugit laboriosam. Pariatur rem delectus, perferendis provident distinctio iste tempora cumque! Vero error ab amet praesentium expedita debitis ut, soluta alias dolores ea dolore placeat architecto reiciendis voluptatum totam eaque laboriosam.</p>
<div class="ad js-ad">
<div class="card js-card">
<h2>我是廣告</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, fugiat.</p>
關閉
</div>
</div>
</body>
You can toggle a class in your function that will add an overflow-y: hidden to your body and remove it when you run the fadeOut() function.
NOTE: I changed the elements in the modal as something in your code was breaking the snippit. Prolly the javascript in the a href.
// 點按鈕彈出廣告
$(function() {
$('.js-btn').click(function() {
$('.modal').fadeIn();
// optional to add flex display when faded in
$('.modal').css('display', 'flex')
$(document.body).addClass('no-scroll');
});
})
// 點關閉按鈕關閉廣告
$(function() {
$('.modal-close').click(function() {
$('.modal').fadeOut();
$(document.body).removeClass('no-scroll');
});
})
// 點灰色區域關閉廣告，但是藍色區域不關閉
$(function() {
$('.modal').click(function(e) {
if (e.target.classList.contains('modal')) {
$(this).fadeOut();
$(document.body).removeClass('no-scroll');
}
})
})
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: start;
position: relative;
}
.par {
height: 3000px;
}
.btn {
text-decoration: none;
padding: 30px;
background-color: #ee3f4d;
color: #fff;
border-radius: 8px;
transition: 0.5s;
}
.btn:hover {
background-color: #ea1725;
box-shadow: 0px 6px 2px rgba(0, 0, 0, 0.1);
}
.modal {
position: fixed;
justify-content: center;
align-items: center;
display: none;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
z-index: 99999;
}
.modal-card {
width: 300px;
height: 300px;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
background-color: #0f7bff;
color: #fff;
border-radius: 20px;
padding: 10px;
line-height: 2;
}
/* added the class to toggle the overflow-y on the body
when the JS function to fadeIn()/fadeOut() is fired */
.no-scroll {
overflow: hidden;
}
.modal-card .close {
display: inline-block;
text-decoration: none;
padding: 10px;
background-color: #e5f75b;
color: #222;
border-radius: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
點擊出現廣告視窗
<p class="par"> Mollitia magnam minima dolorem ex molestias quis esse vel dolore qui, aut commodi quasi aliquam vitae blanditiis in voluptatibus obcaecati consequatur consequuntur ducimus ipsa facilis illum. Vel laboriosam nihil necessitatibus, incidunt cupiditate nisi
corrupti ipsam vero velit accusamus, dolore voluptatibus exercitationem atque. Molestiae necessitatibus error sint. Iusto temporibus error voluptas corrupti tenetur dignissimos mollitia similique aspernatur, quas, ipsam iste voluptate? Adipisci vel
animi ea, id aspernatur maiores ipsam labore quia perferendis delectus. Debitis autem praesentium quae, nulla sapiente, cupiditate quo iure dignissimos dolores deserunt magni laudantium nostrum facere earum odio accusantium reprehenderit fugit laboriosam.
Pariatur rem delectus, perferendis provident distinctio iste tempora cumque! Vero error ab amet praesentium expedita debitis ut, soluta alias dolores ea dolore placeat architecto reiciendis voluptatum totam eaque laboriosam.</p>
<div class="modal">
<div class="modal-card">
<h2>This is a header</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, fugiat.</p>
<button class="modal-close">Close</button>
</div>
</div>
I am a beginner. I am trying to make a webpage. But I'm having a problem. I added a class with the help of jQuery so that the background color(white) of the navbar changes when scrolling. I also want to change the color of the link in the navbar so that it can be visible after adding the navbar background color(white) because the navbar links color is white. Scrolling changes the background color of the navbar but not the color of the link.
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$(".header-1").addClass("nav-color");
}
else {
$(".header-1").removeClass("nav-color");
}
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
text-decoration: none !important;
list-style: none;
}
a {
color: #fff;
}
.x {
border: 1px solid #fff;
}
.button {
display: block;
width: 180px;
padding: 15px 20px;
background: transparent;
color: #fff;
font-weight: bold;
text-align: center;
border: 2px solid #fff;
border-radius: 30px;
}
header {
background: green;
/* I've used an image here */
height: 100vh;
color: #fff;
width: 100%;
}
.header-1 {
position: fixed;
width: 100%;
}
/* ============================ */
/* ======= jQuery class ======= */
/* ============================ */
.nav-color {
background: #fff;
}
.nav-color a {
color: #000 !important;
}
/* ============================ */
/* ============================ */
/* ============================ */
.header-2 {
height: 100vh;
display: grid;
place-items: center;
}
.header-2-1 {
width: 50%;
text-align: center;
margin: auto;
}
.header-2-btn {
margin: auto;
}
/* Bootstrap changed */
.navbar a {
color: #fff !important;
}
.navbar-toggler {
color: #fff !important;
}
/* Responsive */
#media (max-width: 576px) {
.header-2-1 {
width: 95% !important;
}
}
#media (max-width: 768px) {
.header-2-1 {
width: 90% !important;
}
}
#media (max-width: 991px) {
.header-1 {
background: #fff;
width: 100% !important;
text-align: center;
}
.header-1 a {
color: black !important;
}
.header-2-1 {
width: 80% !important;
}
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<header id="home">
<div class="header-1">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-transparent">
<div class="container-fluid">
<a class="navbar-brand" href="#">Dabananda Mitra</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-row-reverse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link" href="#">Reviews</a>
<a class="nav-link" href="#">Portfolio</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="header-2 container">
<div class="header-2-1">
<h2>Welcome</h2>
<h1 class="my-4">I'M A WEB DEVELOPER</h1>
<p class="my-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos explicabo magni voluptates rerum laborum cum</p>
DOWNLOAD CV
</div>
</div>
</header>
<section>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor molestias rerum rem eveniet qui modi dignissimos illum, voluptates cum harum distinctio quaerat quidem a et, laboriosam vero. Dolor labore porro vel reiciendis saepe itaque, assumenda autem
quas fugiat error cupiditate ipsam ducimus nesciunt adipisci? Atque obcaecati, nemo ab, doloremque laudantium fugit veritatis inventore dicta sit dolor unde. Ipsam repellendus voluptatum voluptas enim eos consequatur veniam ipsa maxime officiis odio
quae animi fugiat, pariatur dolores quisquam deleniti qui adipisci assumenda, necessitatibus dolor similique. Accusantium vel dolores libero sint voluptate commodi et sunt consequatur doloremque totam. Exercitationem itaque consectetur unde eos iusto!
Ab ex tempore quisquam similique animi rem reiciendis dolor error fugit odio consectetur voluptate incidunt quam soluta veniam, fuga rerum. Vel soluta obcaecati numquam veniam temporibus quia? Cum ullam alias ipsam, quibusdam aut totam officiis magnam
cupiditate odio laudantium, fuga ipsum velit ex illum aspernatur doloremque impedit vitae illo maiores perspiciatis ratione. Ex hic quisquam quis odit debitis, architecto modi delectus deserunt tempore molestias officia a maiores rem eius consequuntur
eaque at iure inventore animi expedita iste, harum cumque. Ut architecto recusandae eligendi facilis sed nemo sapiente, officiis ullam ad quasi accusantium culpa nihil optio incidunt. Ipsum vero reprehenderit laudantium non minima repellat iste consectetur
nesciunt fugiat deleniti id sint asperiores vitae, minus, qui earum! Adipisci eveniet dolor, tempore repellat optio recusandae perspiciatis eos quas commodi animi, vitae voluptate maiores suscipit itaque, explicabo natus minima provident! Omnis, minima
praesentium sit voluptatem amet quibusdam quo obcaecati iusto et asperiores exercitationem nostrum nulla eligendi. Nemo facere itaque odit labore reiciendis, porro rerum, consequatur tempore ipsam repudiandae id omnis quia ea optio corporis? Accusantium,
porro eos cupiditate inventore deserunt ducimus saepe quam eveniet et excepturi sed voluptatem assumenda animi voluptatum consequuntur ut mollitia eius culpa possimus suscipit placeat soluta similique delectus provident! Debitis alias, illum obcaecati
tempore aspernatur et eos soluta repellendus, nulla repudiandae aliquam accusamus quibusdam corrupti rem! Ipsum blanditiis eligendi vel quis dolore ullam cumque excepturi! Molestias id error possimus soluta eum laborum ratione alias sequi, blanditiis
necessitatibus? Debitis officia quas accusamus ipsa. Fugiat doloremque, veniam cupiditate ad architecto enim ratione maiores velit officiis, corporis tempora eligendi! Vel quaerat dolor veniam hic earum dignissimos enim fuga est nulla architecto fugit
porro tempora sapiente culpa provident eum cum deserunt officia, expedita molestiae iste. Doloremque, porro est? Nisi earum, modi repellendus minus reprehenderit at quia, quae consectetur laudantium delectus maiores? Ad quod autem voluptate ex mollitia
illum ipsam fuga quaerat asperiores, dignissimos impedit doloremque aliquid dolorem tempore recusandae ea rem consectetur maiores. Vero sunt, consequuntur delectus provident possimus veniam fuga in iusto quos accusamus rem illum magni animi suscipit!
Reiciendis magnam nulla deserunt maxime eveniet sapiente perferendis ad laborum autem in hic maiores quod, provident cumque sequi? Debitis esse quibusdam dolorum cum? Debitis, eos doloribus obcaecati commodi ipsam error, quam iure voluptatibus deserunt
minima autem repellat ratione quibusdam voluptates quaerat iusto mollitia vel itaque aspernatur ab ut impedit quis magnam sint! Quasi mollitia doloremque iste aperiam incidunt obcaecati quos qui atque laudantium tempora distinctio quam, natus eum aspernatur
eaque sunt aut. Fugiat aperiam saepe autem architecto fuga id, laborum error voluptatum aliquid magni eius iste, soluta rerum, doloribus atque maiores unde tempora a accusantium modi. Illum, voluptas? Laboriosam est laudantium dolore repudiandae maxime,
reiciendis voluptate consequuntur? Iure velit et distinctio odio est saepe neque eum! Voluptatem placeat adipisci suscipit eaque quis nisi quas? Quam hic consectetur quasi, laborum maxime nulla cumque fugit at obcaecati. Deserunt rerum maxime provident
aut ipsum reprehenderit magnam eius nemo aliquam earum quo molestiae, accusamus, voluptatem illo quasi. Fuga dolorum minus, rem officia aliquam debitis ad aut hic ut ratione. Possimus placeat nesciunt nihil, delectus magni unde minus? Nemo quaerat ipsa
ratione sit pariatur quia qui veritatis dolor eius, corporis ea, harum dignissimos illum porro tenetur. Perferendis debitis nemo odit minima ipsam magni ullam itaque vero, rem repellendus dolorum odio iste libero officiis soluta harum quo incidunt!
Dicta magni nulla suscipit voluptatibus itaque inventore consequatur odio aliquid? Suscipit, asperiores tenetur! Nesciunt vitae fugiat mollitia quod nulla quo, quas aperiam ex inventore veniam quis quos obcaecati unde optio culpa maxime, suscipit sunt
repudiandae minima? Eveniet cum porro, sequi illo tempora iste ipsa nisi atque in earum eligendi eum? Unde ipsam explicabo alias quisquam esse delectus sunt dolore ea magni, sed nemo ut nisi, temporibus debitis, et non similique. Fuga quo minima sequi
unde quisquam labore voluptatibus, excepturi aliquid tempore, qui officiis velit in. Iste, enim iure inventore eos, delectus reprehenderit culpa distinctio quos aperiam reiciendis, molestias labore. Quam dignissimos minus unde molestias? Voluptate quae
ex dicta sit culpa! Atque quae, nobis aliquid culpa laborum laboriosam cum similique obcaecati consequatur repellendus natus corrupti quo tenetur qui molestias voluptatem. Cupiditate tempora mollitia commodi tenetur, praesentium, consectetur provident
id maxime odit voluptas perspiciatis qui ipsam facere error voluptatem adipisci quisquam, dolorem similique harum modi laborum at? Aliquam, illo sequi nobis illum veritatis minima odio unde eveniet voluptatibus natus. Eos veniam voluptate id voluptates.
Aliquam ea minima laborum magnam quaerat quibusdam fuga quas sed. Perspiciatis expedita quam hic autem, ipsam, quasi nihil nulla sed harum repellendus corporis laborum error odit quibusdam temporibus inventore nisi sunt veniam qui sapiente sint ipsa
et quas! Magni praesentium, beatae, illum vel rem voluptas porro nulla commodi hic soluta laborum blanditiis atque nostrum natus. Earum accusamus eius veniam, aspernatur quis ad nisi voluptatum? Odit, voluptates dolorum. Alias, magni dolore assumenda
repudiandae veniam ut fugiat quia nam fugit perferendis. Rerum corporis nobis amet natus alias! Nobis nostrum nemo excepturi doloribus temporibus consequuntur repellendus dignissimos rem voluptatum veritatis, similique labore optio facilis aliquid tenetur
autem! Officia praesentium velit obcaecati maiores at. Exercitationem, rem asperiores maiores minima placeat veniam iure voluptatibus illum sint nihil neque sed incidunt numquam ratione obcaecati unde ipsa velit porro tempora quo perspiciatis sit corrupti
quidem? Voluptate magnam, distinctio saepe hic amet adipisci atque reiciendis dicta aliquid nisi vero soluta ad aut animi? Omnis hic laborum eius quasi modi, inventore nesciunt, ut dicta fuga tempore recusandae aliquam autem dolores commodi cum magnam
quisquam, unde velit exercitationem nostrum perspiciatis!
</section>
How can I change the link color of navbar? Help me please.
Thank you.
Use the class like this:
.header-1.nav-color a {
color: #000 !important;
}
instead of this:
.nav-color a {
color: #000 !important;
}
where you add the jQuery classes.
$(function(){
$(window).scroll(function () {
var scrollVal = $(this).scrollTop();
var adscrtop =$(".header").offset().top
// 在 RWD 767以下不作動
if(window.screen.width>767){
if(scrollVal> adscrtop){
$(".banner").css({"position":"fixed","top":"60px"});
}else{
$(".banner").css({"position": "static"});
}
}
});
});
.header{
max-width:768px;
margin: 0 auto;
}
.nav{
position: sticky;
top:0px;
width: 100%;
height: 60px;
background-color: #f55c47;
z-index:99;
}
.container{
display: flex;
justify-content:space-between;
}
.main{
position: sticky;
top:60px;
flex:2;
background-color: #9fe6a0;
padding:10px;
}
.banner{
flex:1;
width: 200px;
height: 100px;
background-color: #564a4a;
}
.img{
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
<div class="nav"></div>
<div class="container">
<div class="main">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem quae maiores, quibusdam doloribus eum excepturi ab fugit dolor vel, est molestiae magni tenetur nihil, non architecto aperiam. Consectetur tempore atque doloribus exercitationem veniam. Quibusdam, odio nisi at similique magnam nobis, voluptates non iste laudantium in quo harum soluta voluptatibus vitae labore modi ullam minima enim placeat nesciunt assumenda perspiciatis cumque! A modi delectus assumenda totam, pariatur harum! Odio adipisci maxime expedita beatae hic vero natus necessitatibus! Error earum at natus nemo! Quae aliquid minima quasi exercitationem eum, iure rerum consequatur ipsa. Optio repellendus quibusdam quia incidunt accusamus beatae ex? Accusantium nam, enim esse fugit repellendus dignissimos amet reiciendis nulla porro quo quis facere unde nesciunt culpa molestias sunt a beatae non ad. Voluptatibus, velit numquam. Adipisci molestiae in commodi non officiis facilis repellendus, doloremque cupiditate dolorum nostrum neque magnam aut asperiores quo nam id optio facere nesciunt praesentium. Repellat provident vero rem, tempore ad possimus accusantium perferendis! Architecto repellendus, error numquam necessitatibus voluptatibus asperiores dolorem eius quos beatae a doloremque velit suscipit perspiciatis nisi in tempora illum quidem? In totam fugit mollitia libero sequi voluptates soluta praesentium dolor nihil! Magnam sunt animi omnis in repudiandae cum laudantium nemo unde nulla necessitatibus mollitia nihil accusantium hic voluptas ab facilis aperiam ipsum, natus suscipit corporis. Alias quidem beatae, dolore et recusandae nisi optio error laboriosam temporibus minima voluptatibus reiciendis ipsam officia expedita totam asperiores at provident? Rerum illo provident vitae asperiores optio. Quas est obcaecati consequuntur accusantium quasi possimus soluta architecto adipisci quisquam. Magni, suscipit, quisquam quasi iure architecto expedita reiciendis vitae nulla consequuntur ex illo. Nobis accusantium et eveniet animi, quibusdam sunt beatae consequatur error, qui impedit rerum exercitationem, nulla cupiditate distinctio? Repudiandae fuga excepturi hic ex unde sequi labore, nulla sapiente, distinctio tempora et, dignissimos fugiat inventore a nemo rerum maiores nihil soluta laudantium eius ipsa accusantium explicabo similique! Atque, iusto ipsam! Sequi, nam, laborum velit repellat perferendis voluptatem reprehenderit, odio commodi blanditiis doloremque corrupti quam in nesciunt! Culpa quam iure vero. Labore error, iure assumenda aliquam ea possimus! Amet aliquam eos maxime? Quos numquam quas similique ex eos tempora magni repellendus praesentium? Ad quae vel labore quisquam quidem aliquam, molestias dolorum pariatur minus cupiditate odio, velit mollitia, deleniti corrupti eius nam, optio ullam impedit amet ducimus dolores architecto, id, quaerat ratione sed quas. Qui eius labore quia maiores adipisci, quos quod omnis veritatis modi fugiat. Et, cupiditate, cumque laudantium rem praesentium error odio veniam, repellat
</div>
<div class="banner">
<img class"photo"src="https://images.unsplash.com/photo-1620706857370-e1b9770e8bb1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="">
</div>
</div>
</div>
Tonight try using jQuery to fix the brown block under the red block. When scrolling up, only the green block will go up!
The brown area is fixed below the red area, but there are some problems As I scroll up, the brown block goes to the left and goes behind the red block Would you like to help me see which side of my code I have written wrong? Which side did I get wrong? Thank you for watching my question.
PS. My English is not very good, please let me know if there is something wrong with my expression. Thank you. Below is my code`
There is a small mistake here.
Inside your scroll listener, you have written "position": "fixed".
Whereas it should've been "position": "sticky".
$(".banner").css({
"position": "sticky",
"top": "60px"
});
"position": "sticky" automatically makes the element stick at the given position while scrolling.
For more info on CSS Positioning, check this out.
Check the updated snippet
$(function() {
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
var adscrtop = $(".header").offset().top
// 在 RWD 767以下不作動
if (window.screen.width > 767) {
if (scrollVal > adscrtop) {
$(".banner").css({
"position": "sticky",
"top": "60px"
});
} else {
$(".banner").css({
"position": "static"
});
}
}
});
});
.header {
max-width: 768px;
margin: 0 auto;
}
.nav {
position: sticky;
top: 0px;
width: 100%;
height: 60px;
background-color: #f55c47;
z-index: 99;
}
.container {
display: flex;
justify-content: space-between;
}
.main {
position: sticky;
top: 60px;
flex: 2;
background-color: #9fe6a0;
padding: 10px;
}
.banner {
flex: 1;
width: 200px;
height: 100px;
background-color: #564a4a;
}
.img {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
<div class="nav"></div>
<div class="container">
<div class="main">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem quae maiores, quibusdam doloribus eum excepturi ab fugit dolor vel, est molestiae magni tenetur nihil, non architecto aperiam. Consectetur tempore atque doloribus exercitationem veniam.
Quibusdam, odio nisi at similique magnam nobis, voluptates non iste laudantium in quo harum soluta voluptatibus vitae labore modi ullam minima enim placeat nesciunt assumenda perspiciatis cumque! A modi delectus assumenda totam, pariatur harum!
Odio adipisci maxime expedita beatae hic vero natus necessitatibus! Error earum at natus nemo! Quae aliquid minima quasi exercitationem eum, iure rerum consequatur ipsa. Optio repellendus quibusdam quia incidunt accusamus beatae ex? Accusantium
nam, enim esse fugit repellendus dignissimos amet reiciendis nulla porro quo quis facere unde nesciunt culpa molestias sunt a beatae non ad. Voluptatibus, velit numquam. Adipisci molestiae in commodi non officiis facilis repellendus, doloremque
cupiditate dolorum nostrum neque magnam aut asperiores quo nam id optio facere nesciunt praesentium. Repellat provident vero rem, tempore ad possimus accusantium perferendis! Architecto repellendus, error numquam necessitatibus voluptatibus asperiores
dolorem eius quos beatae a doloremque velit suscipit perspiciatis nisi in tempora illum quidem? In totam fugit mollitia libero sequi voluptates soluta praesentium dolor nihil! Magnam sunt animi omnis in repudiandae cum laudantium nemo unde nulla
necessitatibus mollitia nihil accusantium hic voluptas ab facilis aperiam ipsum, natus suscipit corporis. Alias quidem beatae, dolore et recusandae nisi optio error laboriosam temporibus minima voluptatibus reiciendis ipsam officia expedita totam
asperiores at provident? Rerum illo provident vitae asperiores optio. Quas est obcaecati consequuntur accusantium quasi possimus soluta architecto adipisci quisquam. Magni, suscipit, quisquam quasi iure architecto expedita reiciendis vitae nulla
consequuntur ex illo. Nobis accusantium et eveniet animi, quibusdam sunt beatae consequatur error, qui impedit rerum exercitationem, nulla cupiditate distinctio? Repudiandae fuga excepturi hic ex unde sequi labore, nulla sapiente, distinctio tempora
et, dignissimos fugiat inventore a nemo rerum maiores nihil soluta laudantium eius ipsa accusantium explicabo similique! Atque, iusto ipsam! Sequi, nam, laborum velit repellat perferendis voluptatem reprehenderit, odio commodi blanditiis doloremque
corrupti quam in nesciunt! Culpa quam iure vero. Labore error, iure assumenda aliquam ea possimus! Amet aliquam eos maxime? Quos numquam quas similique ex eos tempora magni repellendus praesentium? Ad quae vel labore quisquam quidem aliquam, molestias
dolorum pariatur minus cupiditate odio, velit mollitia, deleniti corrupti eius nam, optio ullam impedit amet ducimus dolores architecto, id, quaerat ratione sed quas. Qui eius labore quia maiores adipisci, quos quod omnis veritatis modi fugiat.
Et, cupiditate, cumque laudantium rem praesentium error odio veniam, repellat
</div>
<div class="banner">
<img class "photo"src="https://images.unsplash.com/photo-1620706857370-e1b9770e8bb1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="">
</div>
</div>
</div>
On change content in div block jquery scrollbar is disappear, $('.scrollbar-outer').css('overflow', 'auto) not working, how to fix?'
i'm trying to change class to add overflow to .txttb, but still the same
jQuery(document).ready(function() {
jQuery('.scrollbar-outer').scrollbar();
});
$(document).on('click', '.hhh', function(e) {
e.preventDefault();
$('.txtb').html('dorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, harum fugit doloremque amet qui. Facilis, consectetur ab fuga, dolorem sapiente tempore laboriosam voluptates nulla beatae architecto placeat enim inventore, nemo praesentium quisquam quia! At voluptatibus sit error recusandae animi, provident atque laborum iusto esse illum consequatur aspernatur nisi, eveniet harum voluptates sapiente blanditiis quibusdam eos dolorum quisquam nulla eligendi! Corporis excepturi temporibus quibusdam quasi, ut assumenda aut, aliquid officiis facilis minus nisi. Quam est itaque temporibus, ex soluta blanditiis sapiente consectetur quae quasi mollitia ut in ipsum modi tempore sint quisquam eos laboriosam, inventore, optio delectus reiciendis, assumenda doloremque explicabo.')
$('.scrollbar-outer').css("overflow", "auto");
})
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.main_block {
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.txtb {
width: 350px;
height: 200px;
color: #313131;
border: 1px solid #33ffbd;
overflow: hidden;
overflow-y: visible;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.scrollbar/0.2.11/jquery.scrollbar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.scrollbar/0.2.11/jquery.scrollbar.min.css">
<div class="main_block">
<div class="txtb scrollbar-outer">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi error, vero. Tenetur beatae labore facere modi! Cupiditate in tempora quaerat blanditiis voluptatibus magnam facilis rem, quo sequi necessitatibus excepturi cumque, dolore. Molestias non
nisi porro delectus doloribus inventore vero asperiores culpa mollitia aliquam fugiat suscipit nostrum sed quibusdam voluptatibus, enim, accusantium quam, debitis dolore minus modi a. Quos ex ut, qui, quae modi assumenda veritatis sapiente voluptates.
Eius quidem quas, quos veritatis, cumque consequatur soluta, alias velit sed inventore itaque dolor. Alias, rerum, veritatis! Porro vero, delectus quam repellendus doloremque vitae facilis quod expedita commodi iure impedit corporis, sunt voluptatum
quaerat, natus. Doloribus culpa ea, laudantium eos illo iure qui aperiam quod, repellat reiciendis quos rem, quisquam vitae officiis nam unde itaque dignissimos provident dolor dolorem aspernatur, possimus corrupti in! Maxime, nostrum, perspiciatis
vero quos similique illo nulla praesentium id soluta explicabo quidem quam! Nesciunt quasi nisi, facilis distinctio quae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia natus recusandae quibusdam exercitationem cumque inventore
est illum! Illo, a, unde. Accusamus veritatis quibusdam illo numquam dicta recusandae, natus voluptatum magnam provident, fuga consectetur eaque unde porro facilis, corporis distinctio excepturi, fugiat illum nesciunt cupiditate voluptatem. Aut incidunt
iusto animi quidem fugit, quae dolorum voluptate aliquid officiis natus commodi aspernatur dolore, at neque vitae quam saepe quibusdam consectetur cumque impedit necessitatibus ad nam, vero. Ipsam saepe odit neque molestias quod asperiores aspernatur
voluptas pariatur? Impedit tempora quod deserunt, soluta cupiditate dolores quasi doloribus suscipit placeat molestias nemo esse iste harum odio natus saepe quae sapiente explicabo sint ullam minus asperiores magnam quia excepturi. Mollitia velit
expedita rem, vero debitis ratione odit modi quidem explicabo molestiae in facere cupiditate sit, quaerat magnam tempora aspernatur illum voluptatibus sunt, unde nesciunt numquam laboriosam. Possimus iusto doloribus delectus magni, cum in eaque, nam
consequatur voluptas eius dignissimos, magnam molestias architecto. Deserunt unde adipisci accusantium dolorem, praesentium consectetur minus amet molestias officiis veritatis sed, illo recusandae quod! Perferendis illum ab fugiat cupiditate iste
tempore pariatur, excepturi numquam odio soluta, culpa laborum suscipit sint quo quaerat repellat quos enim, voluptate impedit saepe minus doloribus. Sunt laudantium, soluta.
</div>
<button class="hhh">Hello</button>
</div>
Instead of $('.txtb).html, use $('.txtb.scroll-content').html(
jQuery(document).ready(function() {
jQuery('.scrollbar-outer').scrollbar();
});
$(document).on('click', '.hhh', function(e) {
e.preventDefault();
$('.txtb.scroll-content').html('dorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, harum fugit doloremque amet qui. Facilis, consectetur ab fuga, dolorem sapiente tempore laboriosam voluptates nulla beatae architecto placeat enim inventore, nemo praesentium quisquam quia! At voluptatibus sit error recusandae animi, provident atque laborum iusto esse illum consequatur aspernatur nisi, eveniet harum voluptates sapiente blanditiis quibusdam eos dolorum quisquam nulla eligendi! Corporis excepturi temporibus quibusdam quasi, ut assumenda aut, aliquid officiis facilis minus nisi. Quam est itaque temporibus, ex soluta blanditiis sapiente consectetur quae quasi mollitia ut in ipsum modi tempore sint quisquam eos laboriosam, inventore, optio delectus reiciendis, assumenda doloremque explicabo. impedit saepe minus doloribus. Sunt laudantium, soluta. it saepe minus doloribus. Sunt laudantium, soluta ')
$('.scrollbar-outer ').css('overflow', 'auto');
})
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.main_block {
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.txtb {
width: 350px;
height: 200px;
color: #313131;
border: 1px solid #33ffbd;
/* overflow: hidden; */
/* overflow-y: visible; */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.scrollbar/0.2.11/jquery.scrollbar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.scrollbar/0.2.11/jquery.scrollbar.min.css">
<div class="main_block">
<div class="txtb scrollbar-outer">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi error, vero. Tenetur beatae labore facere modi! Cupiditate in tempora quaerat blanditiis voluptatibus magnam facilis rem, quo sequi necessitatibus excepturi cumque, dolore. Molestias non
nisi porro delectus doloribus inventore vero asperiores culpa mollitia aliquam fugiat suscipit nostrum sed quibusdam voluptatibus, enim, accusantium quam, debitis dolore minus modi a. Quos ex ut, qui, quae modi assumenda veritatis sapiente voluptates.
Eius quidem quas, quos veritatis, cumque consequatur soluta, alias velit sed inventore itaque dolor. Alias, rerum, veritatis! Porro vero, delectus quam repellendus doloremque vitae facilis quod expedita commodi iure impedit corporis, sunt voluptatum
quaerat, natus. Doloribus culpa ea, laudantium eos illo iure qui aperiam quod, repellat reiciendis quos rem, quisquam vitae officiis nam unde itaque dignissimos provident dolor dolorem aspernatur, possimus corrupti in! Maxime, nostrum, perspiciatis
vero quos similique illo nulla praesentium id soluta explicabo quidem quam! Nesciunt quasi nisi, facilis distinctio quae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia natus recusandae quibusdam exercitationem cumque inventore
est illum! Illo, a, unde. Accusamus veritatis quibusdam illo numquam dicta recusandae, natus voluptatum magnam provident, fuga consectetur eaque unde porro facilis, corporis distinctio excepturi, fugiat illum nesciunt cupiditate voluptatem. Aut incidunt
iusto animi quidem fugit, quae dolorum voluptate aliquid officiis natus commodi aspernatur dolore, at neque vitae quam saepe quibusdam consectetur cumque impedit necessitatibus ad nam, vero. Ipsam saepe odit neque molestias quod asperiores aspernatur
voluptas pariatur? Impedit tempora quod deserunt, soluta cupiditate dolores quasi doloribus suscipit placeat molestias nemo esse iste harum odio natus saepe quae sapiente explicabo sint ullam minus asperiores magnam quia excepturi. Mollitia velit
expedita rem, vero debitis ratione odit modi quidem explicabo molestiae in facere cupiditate sit, quaerat magnam tempora aspernatur illum voluptatibus sunt, unde nesciunt numquam laboriosam. Possimus iusto doloribus delectus magni, cum in eaque, nam
consequatur voluptas eius dignissimos, magnam molestias architecto. Deserunt unde adipisci accusantium dolorem, praesentium consectetur minus amet molestias officiis veritatis sed, illo recusandae quod! Perferendis illum ab fugiat cupiditate iste
tempore pariatur, excepturi numquam odio soluta, culpa laborum suscipit sint quo quaerat repellat quos enim, voluptate impedit saepe minus doloribus. Sunt laudantium, soluta.
</div>
<button class="hhh">Hello</button>
</div>
can u help me with one issue.
i can't scroll page when mouse is over youtube iframe
I don't know what else i can add here.
$('.container').perfectScrollbar();
.container {
width: 100%;
height: 400px;
margin: 50px auto 0 auto;
position: relative;
overflow: auto;
}
.content {
background: url('https://noraesae.github.io/perfect-scrollbar/azusa.jpg') top left no-repeat;
width: 1280px;
height: 720px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.10/css/perfect-scrollbar.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.2.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.10/js/perfect-scrollbar.jquery.js"></script>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil necessitatibus nemo dolore totam fugiat magni, laudantium nostrum ducimus atque numquam, vitae error, libero voluptas obcaecati. Molestias cum, sed enim cumque sit minus laborum quasi, illum tempore quidem quaerat temporibus corporis itaque qui dolores eius nulla. Officiis deleniti ab laborum cupiditate assumenda enim unde ducimus quam aperiam magni totam quasi similique voluptas aliquid voluptatibus voluptate blanditiis beatae possimus explicabo, nihil, dolor delectus, omnis nisi, quia quod. Tempora, nihil. Optio dolor nulla repellendus inventore reiciendis, animi rem, necessitatibus aut commodi repudiandae illo expedita deserunt aliquam! Iste nam iusto id, dolor perferendis accusantium impe
<iframe width="560" height="315" src="https://www.youtube.com/embed/4qcetGktEuc" frameborder="0" allowfullscreen></iframe>
eaque minus nostrum quis optio consequatur quo nulla, qui dicta. Sunt officia laboriosam adipisci consectetur eius atque nobis dignissimos magnam. Ratione quis modi, minima magni, quos dolorem quasi nemo sunt nisi unde itaque temporibus fugit officia accusamus perferendiperspiciatis, quod eius laboriosam cumque numquam vel est sed illo. Placeat nemo amet id, consequuntur molestias culpa eligendi commodi maxime, sapiente eveniet totam voluptatibus natus harum voluptas perferendis quae tempora nulla, repellat temporibus, ex odit. Expedita dolore, incidunt similique veritatis perspiciatis repudiandae sunt sequi magni inventore mollitia tempore impedit quasi ea dolorem porro, accusamus laboriosam. Aperiam magni commodi laudantium natus. Atque quidem tempora temporibus recus Cupiditate a voluptatum repellat aliquam architecto ipsa non sint laudantium necessitatibus inventore natus ab dolor, illum sit officia enim expedita iste perferendis libero! Corrupti praesentium id expedita rerum, quos optio vitae ipsum! Sequi sit fugiat inventore temporibus consequuntur eum labore officia fugit. Illo sequi distinctio quos illum id architecto quisquam facere perferendis. Voluptate pariatur, molestias voluptates animi voluptatem deserunt, assumenda natus libero ex qui omnis error perspiciatis.
</div>