When working with Bootstrap 4, I encountered an issue where changing the block position from relative to fixed using a script caused the block to decrease in size.
The script I used includes a .sticky class:
.sticky {
position: fixed !important;
top: 2%;
}
This script is intended to change the position of elements (empty_row) from relative to fixed. However, the issue only occurs in wide screens when there are two blocks with class names col-md-3 and col-md-8.
You can view the example of the issue on my codepen.
let avatarSimple = document.querySelector(".avatar_simple");
let avatarQuantumBreak = document.querySelector(".avatar_quantum_break");
avatarQuantumBreak.style.opacity = "0";
let hover = () => {
avatarQuantumBreak.style.opacity = "1";
}
let normal = () => {
avatarQuantumBreak.style.opacity = "0";
}
// scroll function position fixed
window.onscroll = function() {
var scrolled = window.pageYOffset || document.documentElement.scrollTop;
scrolled >= 20 ? document.querySelector(".empty_row").classList.add("sticky") : document.querySelector(".empty_row").classList.remove("sticky");
}.header_home {
text-align: right;
}
.home_link , .main_text {
color: #fff;
font-size: 1.5em;
}
.left_block {
padding: 30px 20px 20px;
box-shadow: -4px 7px 15px 1px rgba(0,0,0,.2);
}
.avatar {
position: relative;
border-radius: 50%;
display: flex;
justify-content: center;
height: 195px;
}
.avatar_simple,
.avatar_quantum_break {
position: absolute;
display: block;
text-align:center;
transition: opacity 1s ease-out;
}
.avatar .avatar_simple img,
.avatar .avatar_quantum_break img {
border-radius: 50%;
display: inline-block;
}
.info {
margin-top: 33px;
}
.text_uppercase {
text-transform: uppercase;
color: #fff;
font-size: 1.4em;
text-align: center;
margin-bottom: 15px;
}
.text_muted {
text-align: center;
opacity: 0.65;
}
.download_resume {
position: absolute;
width: 100%;
left: 0%;
padding: 30px;
margin: 0;
font-size: .875em;
background-color: #313C42;
box-shadow: -4px 7px 15px 1px rgba(0,0,0,.2);
}
.text_widget {
vertical-align: middle;
}
.text_widget a {
background-color: #DEC746 !important;
border-color: #DEC746 !important;
color: #000 !important;
font-size: 15px !important;
padding: 12px 30px !important;
border-radius: 35px !important;
}
center {
display: block;
text-align: -webkit-center;
}
.btn_link {
font-weight: 700 !important;
}
.main_wrap, .personal_info {
background-color: #313C42;
border:1px solid #2C363B;
}
.basic_info {
padding: 40px 0 40px 0;
}
.btn-bordered {
border-color: #1FA184 !important;
}
.personal_info {
margin-top: 15px;
}
/*skills*/
.left_block_align > .col-md-3 {
padding-left: 0px !important;
padding-right:0px !important;
}
.brd_btm {
border-bottom: 1px solid #2C363B;
}
.section {
margin-bottom: 30px;
}
.sticky {
position: fixed !important;
top: 2%;
}<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-between left_block_align">
<div class="col-md-3">
<div class="empty_row left_block" style="background-color: #1FA184;">
<div class="avatar" onmouseover="hover();" onmouseout="normal();">
<span class="avatar_simple">
<img src="https://certy.px-lab.com/developer/wp-content/uploads/sites/6/2017/08/certy-programmer-1-195x195.png">
</span>
<span class="avatar_quantum_break">
<img src="https://certy.px-lab.com/developer/wp-content/uploads/sites/6/2017/08/certy-programmer-2-195x195.png">
</span>
</div>
<div class="info">
<h2 class="text_uppercase">Sergio Ramos</h2>
<p class="text_muted">Front End Developer</p>
</div>
<div class="download_resume">
<div class="text_widget">
<center>
<a href="#" class="btn btn-primary btn-lg btn_link">Download CV</a>
</center>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="main_wrap">
<div class="basic_info">
<section id="about" class="section_about padd_box">
<div class="row">
<div class="col">
<h2 class="title text_uppercase">About Me</h2>
<p><b>Hello, I’m Robert Smith</b></p>
<p>Hello! I’m Robert Smith. Senior Web Developer specializing in front end development. Experienced with all stages of the development cycle for dynamic web projects. Well-versed in numerous programming languages including JavaScript, SQL, and C. Stng background in project management and customer relations.</p>
<div class="share-box">
<button class="share-btn btn btn-primary btn-bordered text_uppercase">
<span class="fa fa-share-alt"></span>
Share
</button>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="personal_info">
<div class="basic_info padd_box">
<section id="skills" class="brd_btm section">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam voluptates a sed similique harum reiciendis quos minus blanditiis aliquam. Amet adipisci veritatis quam quisquam animi cum dolorum natus quae eligendi.
</section>
<section class="brd_btm section">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam qui, amet officiis veniam maiores odio sed fuga quo ut quis esse! Consectetur tempore accusantium blanditiis cupiditate eligendi ratione quisquam nostrum.
</section>
</div>
</div>
</div>
</div>
</div>