Блог

Я добавил две временные шкалы на свою страницу. 1.Я хотел сделать так, чтобы при наведении курсора мыши только на одну временную шкалу эта временная шкала прокручивалась, чтобы пользователь не отвлекался на прокрутку обеих временных шкал. 2.Когда я наведу курсор на временную шкалу, я буду прокручивать заголовок этой временной шкалы, который будет закреплен в верхнем положении.

Вот мой html-файл

 lt;!DOCTYPE htmlgt;  lt;html lang="en"gt;   lt;headgt;  lt;meta charset="utf-8"gt;  lt;meta content="width=device-width, initial-scale=1.0" name="viewport"gt;   lt;titlegt;BestCleanlt;/titlegt;  lt;meta content="" name="description"gt;  lt;meta content="" name="keywords"gt;   lt;!-- Favicons --gt;    lt;!-- Google Fonts --gt;  lt;link href="https://fonts.googleapis.com/css?family=Open Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,600,600i,700,700i,900" rel="stylesheet"gt;   lt;!-- Vendor CSS Files --gt;   lt;link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"gt;  lt;link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet"gt;  lt;link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet"gt;  lt;!-- lt;link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet"gt;  lt;link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet"gt; --gt;   lt;!-- Template Main CSS File --gt;  lt;link href="assets/css/style.css" rel="stylesheet"gt;  lt;!-- Timeline CSS --gt;  lt;link rel="stylesheet" href="assets/css/timeline.css"gt;   lt;!-- Font Awesome --gt;  lt;link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous"/gt;    lt;/headgt;   lt;bodygt;  lt;stylegt;  /* header style start */  header#header{   box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);  }  #topbar .contact-info i {  color: #348F3C;  line-height: 0;  margin-right: 5px;  }  #topbar .contact-info a{  color: #ff0000;   font-size: 20px;  }    /* header style end*/  /* backto top */  .back-to-top {   background: #348F3C;   }  .back-to-top:hover {   background: #348F3C;   }  lt;/stylegt;   lt;!-- ======= Top Bar ======= --gt;  lt;section id="topbar" class="d-flex align-items-center "gt;  lt;div class="container d-flex justify-content-center justify-content-md-between"gt;  lt;div class="contact-info d-flex align-items-center"gt;   lt;i class="bi bi-phone-fill phone-icon"gt;lt;/igt;   lt;a href="tel:0198-57-02-117" id="hotline"gt;HOTLINE : 0198-57-02-117lt;/agt;  lt;/divgt;   lt;div class="social-links d-none d-md-block"gt;   lt;button type="button" class="btn btn-success"gt;Login/Registerlt;/buttongt;  lt;a href="#" class="facebook"gt;lt;i class="bi bi-facebook"gt;lt;/igt;lt;/agt;   lt;/divgt;  lt;/divgt;  lt;/sectiongt;    lt;!-- ======= Header ======= --gt;  lt;header id="header" class="d-flex align-items-center"gt;  lt;div class="container d-flex align-items-center"gt;   lt;div class="logo me-auto"gt;  lt;h1gt;  lt;a href="index.html"gt;  lt;img src="assets/img/best-clean-logo.png" alt="" srcset=""gt;  lt;/agt;  lt;/h1gt;  lt;!-- Uncomment below if you prefer to use an image logo --gt;  lt;!-- lt;a href="index.html"gt;lt;img src="assets/img/logo.png" alt="" class="img-fluid"gt;lt;/agt;--gt;  lt;/divgt;   lt;nav id="navbar" class="navbar"gt;  lt;ulgt;  lt;ligt;lt;a class="nav-link scrollto active" href="#hero"gt;Homelt;/agt;lt;/ligt;  lt;ligt;lt;a class="nav-link scrollto" href="#about"gt;About Uslt;/agt;lt;/ligt;  lt;ligt;lt;a class="nav-link scrollto" href="#services"gt;Outletslt;/agt;lt;/ligt;  lt;ligt;lt;a class="nav-link scrollto" href="#services"gt;Serviceslt;/agt;lt;/ligt;  lt;ligt;lt;a class="nav-link scrollto" href="#portfolio"gt;Portfoliolt;/agt;lt;/ligt;  lt;ligt;lt;a class="nav-link scrollto" href="#team"gt;Pricinglt;/agt;lt;/ligt;  lt;ligt;lt;a class="nav-link scrollto" href="#team"gt;Gallerylt;/agt;lt;/ligt;  lt;li class="dropdown"gt;lt;a href="#"gt;lt;spangt;Portfoliolt;/spangt; lt;i class="bi bi-chevron-down"gt;lt;/igt;lt;/agt;  lt;ulgt;  lt;ligt;lt;a href="#"gt;Teamlt;/agt;lt;/ligt;  lt;ligt;lt;a href="#"gt;Clientslt;/agt;lt;/ligt;   lt;/ulgt;  lt;/ligt;  lt;ligt;lt;a class="nav-link scrollto" href="#contact"gt;Contactlt;/agt;lt;/ligt;  lt;/ulgt;  lt;i class="bi bi-list mobile-nav-toggle"gt;lt;/igt;  lt;/navgt;lt;!-- .navbar --gt;   lt;/divgt;  lt;/headergt;lt;!-- End Header --gt;   lt;section class="intro"gt;  lt;div class="container"gt;  lt;h1gt;Our Services lt;/h1gt;  lt;/divgt;  lt;/sectiongt;  lt;stylegt;  /* hide scrollbar but allow scrolling */  /* div.scrollable{  -ms-overflow-style: none;   scrollbar-width: none;   overflow-y: scroll;   }   div.scrollable::-webkit-scrollbar {  display: none;   } */  div.scrollable{   height: 500px;  transition: transform .2s;  }  div.scrollable:hover{  transform: scale(1.05);   cursor: pointer;  }  /* semi header sticky */  .sticky {  position: fixed;  top: 10%;  width: 100%;  }   .sticky   .content {  padding-top: 102px;  }  .fixed-top-semi-header{  position: fixed;  top: 9%;  right: 0;  left: 0;  z-index: 1030;  background-color: #ffffff;  }  lt;/stylegt;  lt;div class="row"gt;  lt;div class="col-lg-6 scrollable"gt;  lt;div class="col-title text-center"gt;  lt;h2 class=" fixed-top-semi-header " id="myHeader"gt;Laundrylt;/h2gt;  lt;/divgt;  lt;section class="timeline"gt;  lt;ulgt;  lt;ligt;  lt;div class="content"gt;   lt;img src="assets/img/timeline/t1.png" class="timeline-img" alt="" srcset=""gt;  lt;pgt;At vero eos et lt;/pgt;  lt;/divgt;  lt;/ligt;  lt;ligt;  lt;div class="content"gt;   lt;img src="assets/img/timeline/t2.png" class="timeline-img" alt="" srcset=""gt;  lt;pgt;At vero eos et lt;/pgt;  lt;/divgt;  lt;/ligt;  lt;ligt;  lt;div class="content"gt;   lt;img src="assets/img/timeline/t3.png" class="timeline-img" alt="" srcset=""gt;  lt;pgt;At vero eos et lt;/pgt;  lt;/divgt;  lt;/ligt;  lt;ligt;  lt;div class="content"gt;   lt;img src="assets/img/timeline/t4.png" class="timeline-img" alt="" srcset=""gt;  lt;pgt;At vero eos et lt;/pgt;  lt;/divgt;  lt;/ligt;  lt;ligt;  lt;div class="content"gt;   lt;img src="assets/img/timeline/t5.png" class="timeline-img" alt="" srcset=""gt;  lt;pgt;At vero eos et lt;/pgt;  lt;/divgt;  lt;/ligt;  lt;ligt;  lt;div class="content"gt;   lt;img src="assets/img/timeline/t6.png" class="timeline-img" alt="" srcset=""gt;  lt;pgt;At vero eos et lt;/pgt;  lt;/divgt;  lt;/ligt;  lt;ligt;  lt;div class="content"gt;   lt;img src="assets/img/timeline/t7.png" class="timeline-img" alt="" srcset=""gt;  lt;pgt;At vero eos et lt;/pgt;  lt;/divgt;  lt;/ligt;  lt;ligt;  lt;div class="content"gt;   lt;img src="assets/img/timeline/77.png" class="timeline-img" alt="" srcset=""gt;  lt;pgt;At vero eos et lt;/pgt;  lt;/divgt;  lt;/ligt;   lt;/ulgt;  lt;/sectiongt;  lt;/divgt;  lt;div class="col-lg-6"gt;  lt;div class="col-title text-center"gt;  lt;h2gt;Dry Cleaninglt;/h2gt;  lt;/divgt;  lt;section class="timeline"gt;  lt;ulgt;  lt;ligt;  lt;div class="content"gt;   lt;img src="assets/img/timeline/t1.png" class="timeline-img" alt="" srcset=""gt;  lt;pgt;At vero eos et lt;i class="fas fa-circle"gt;lt;/igt; lt;/pgt;  lt;/divgt;  lt;/ligt;  lt;ligt;  lt;div class="content"gt;   lt;img src="assets/img/timeline/t2.png" class="timeline-img" alt="" srcset=""gt;  lt;pgt;At vero eos et lt;/pgt;  lt;/divgt;  lt;/ligt;  lt;ligt;  lt;div class="content"gt;   lt;img src="assets/img/timeline/t3.png" class="timeline-img" alt="" srcset=""gt;  lt;pgt;At vero eos et lt;/pgt;  lt;/divgt;  lt;/ligt;  lt;ligt;  lt;div class="content"gt;   lt;img src="assets/img/timeline/t4.png" class="timeline-img" alt="" srcset=""gt;  lt;pgt;At vero eos et lt;/pgt;  lt;/divgt;  lt;/ligt;  lt;ligt;  lt;div class="content"gt;   lt;img src="assets/img/timeline/t5.png" class="timeline-img" alt="" srcset=""gt;  lt;pgt;At vero eos et lt;/pgt;  lt;/divgt;  lt;/ligt;  lt;ligt;  lt;div class="content"gt;   lt;img src="assets/img/timeline/t6.png" class="timeline-img" alt="" srcset=""gt;  lt;pgt;At vero eos et lt;/pgt;  lt;/divgt;  lt;/ligt;  lt;ligt;  lt;div class="content"gt;   lt;img src="assets/img/timeline/t7.png" class="timeline-img" alt="" srcset=""gt;  lt;pgt;At vero eos et lt;/pgt;  lt;/divgt;  lt;/ligt;  lt;ligt;  lt;div class="content"gt;   lt;img src="assets/img/timeline/77.png" class="timeline-img" alt="" srcset=""gt;  lt;pgt;At vero eos et lt;/pgt;  lt;/divgt;  lt;/ligt;   lt;/ulgt;  lt;/sectiongt;  lt;/divgt;  lt;/divgt;   lt;!-- footer style --gt;  lt;stylegt;  #footer .footer-top {  background: #198754;  border-top: 1px solid #768fa6;  border-bottom: 1px solid #67839c;  padding: 60px 0 30px 0;  }  lt;/stylegt;  lt;!-- ======= Footer ======= --gt;  lt;footer id="footer"gt;  lt;div class="footer-top"gt;  lt;div class="container"gt;  lt;div class="row"gt;   lt;div class="col-lg-4 col-md-6 footer-info"gt;  lt;h3gt;BestCleanlt;/h3gt;  lt;pgt;  3, Rajuk Avenue,Motijheel C/A,lt;brgt; Dhaka-1000, Bangladesh  lt;brgt;lt;brgt;   lt;stronggt;Phone:lt;/stronggt; 415-555-2671lt;brgt;  lt;stronggt;Email:lt;/stronggt; dami@filler.comlt;brgt;  lt;/pgt;    lt;/divgt;   lt;div class="col-lg-2 col-md-6 footer-links"gt;  lt;h4gt;Quick Linkslt;/h4gt;  lt;ulgt;  lt;ligt;lt;i class="bx bx-chevron-right"gt;lt;/igt; lt;a href="#"gt;Homelt;/agt;lt;/ligt;  lt;ligt;lt;i class="bx bx-chevron-right"gt;lt;/igt; lt;a href="#"gt;About uslt;/agt;lt;/ligt;  lt;ligt;lt;i class="bx bx-chevron-right"gt;lt;/igt; lt;a href="#"gt;Outletslt;/agt;lt;/ligt;  lt;ligt;lt;i class="bx bx-chevron-right"gt;lt;/igt; lt;a href="#"gt;Serviceslt;/agt;lt;/ligt;  lt;ligt;lt;i class="bx bx-chevron-right"gt;lt;/igt; lt;a href="#"gt;Portfoliolt;/agt;lt;/ligt;   lt;/ulgt;  lt;/divgt;   lt;div class="col-lg-2 col-md-6 footer-links pt-3"gt;   lt;ulgt;   lt;ligt;lt;i class="bx bx-chevron-right"gt;lt;/igt; lt;a href="#"gt;Teamslt;/agt;lt;/ligt;  lt;ligt;lt;i class="bx bx-chevron-right"gt;lt;/igt; lt;a href="#"gt;Clientslt;/agt;lt;/ligt;  lt;ligt;lt;i class="bx bx-chevron-right"gt;lt;/igt; lt;a href="#"gt;Contact Uslt;/agt;lt;/ligt;  lt;/ulgt;  lt;/divgt;     lt;stylegt;    #footer .footer-top .social-links a {  background: #ffffff;  color: rgb(0, 0, 0);  text-decoration: none;  }  #footer .footer-top .social-links a:hover {  background: #004916;  color: #fff;  text-decoration: none;  }  lt;/stylegt;   lt;div class="col-lg-4 col-md-6 footer-newsletter"gt;  lt;div class="social-links mt-3"gt;  lt;a href="#" class="facebook"gt;lt;i class="bx bxl-facebook"gt;lt;/igt;lt;/agt;  lt;a href="#" class="twitter"gt;lt;i class="bx bxl-twitter"gt;lt;/igt;lt;/agt;  lt;a href="#" class="instagram"gt;lt;i class="bx bxl-instagram"gt;lt;/igt;lt;/agt;  lt;a href="#" class="google-plus"gt;lt;i class="bx bxl-youtube"gt;lt;/igt;lt;/agt;   lt;/divgt;   lt;/divgt;   lt;/divgt;  lt;/divgt;  lt;/divgt;    lt;div class="container"gt;    lt;div class="credits"gt;     lt;/divgt;  lt;/footergt;lt;!-- End Footer --gt;   lt;a href="#" class="back-to-top d-flex align-items-center justify-content-center"gt;lt;i class="bi bi-arrow-up-short"gt;lt;/igt;lt;/agt;   lt;!-- Timeline JS File --gt;   lt;script src="assets/js/timeline.js"gt;lt;/scriptgt;  lt;!-- Vendor JS Files --gt;   lt;script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"gt;lt;/scriptgt;   lt;!-- Template Main JS File --gt;  lt;script src="assets/js/main.js"gt;lt;/scriptgt;   lt;!-- semi header sticky --gt;  lt;scriptgt;  window.onscroll = function() {myFunction()};    var header = document.getElementById("myHeader");  var sticky = header.offsetTop;    function myFunction() {  if (window.pageYOffset gt; sticky) {  header.classList.add("fixed-top-semi-header");  } else {  header.classList.remove("fixed-top-semi-header");  }  }  lt;/scriptgt;  lt;/bodygt;   lt;/htmlgt;  

Вот файл css

 *,  *::before,  *::after {  margin: 0;  padding: 0;  box-sizing: border-box;  }   body {  font: normal 16px/1.5 "Helvetica Neue", sans-serif;  background: #ffffff;  color: rgb(0, 0, 0);  overflow-x: hidden;  padding-bottom: 50px;  } /* INTRO SECTION  –––––––––––––––––––––––––––––––––––––––––––––––––– */   .fixed-semi-top {  position: sticky;    }  .intro {  background: #ffffff;  padding: 100px 0;  }   .container {  width: 90%;  max-width: 1200px;  margin: 0 auto;  text-align: center;  }   h1 {  font-size: 2.5rem;  }     /* TIMELINE  –––––––––––––––––––––––––––––––––––––––––––––––––– */  div.col-title{  color: #157347;  }  img.timeline-img{  width:100%;  overflow:hidden;  }  .timeline ul {  background: #ffffff;  padding: 50px 0;  }   .timeline ul li {  list-style-type: none;  position: relative;  width: 6px;  margin: 0 auto;  padding-top: 50px;  background: #89ff29;  }   .timeline ul li::after {  content: '';  position: absolute;  left: 50%;  bottom: 0;  transform: translateX(-50%);  width: 30px;  height: 30px;  border-radius: 50%;  background: inherit;  }   .timeline ul li div {  position: relative;  bottom: 0;  width: 200px;  padding: 15px;  background: #ffffff;  }   .timeline ul li div::before {  content: '';  position: absolute;  bottom: 7px;  width: 0;  height: 0;  border-style: solid;  }   .timeline ul li:nth-child(odd) div {  left: 45px;  }  /* the arrows */  .timeline ul li:nth-child(odd) div::before {  left: -15px;  border-width: 11px 10px 10px 10px;  border-color: transparent #ff0015 transparent transparent;  }   .timeline ul li:nth-child(even) div {  left: -209px;  }   /* the arrows */  .timeline ul li:nth-child(even) div::before {  right: 40px;  border-width: 8px 0 8px 16px;  border-color: transparent transparent transparent #ff0015;  }   time {  display: block;  font-size: 1.2rem;  font-weight: bold;  margin-bottom: 8px;  }    /* EFFECTS  –––––––––––––––––––––––––––––––––––––––––––––––––– */   .timeline ul li::after {  transition: background .5s ease-in-out;  }    .timeline ul li.in-view::after {  background: #00ff15;  border:1px solid #121212;  font-family: "Font Awesome 5 Pro";  content: "f111";  display: inline-block;  padding: 2px 0px 0px 5px;  color:#ffffff;  vertical-align: middle;  font-weight:900;   }   .timeline ul li div {  visibility: hidden;  opacity: 0;  transition: all .5s ease-in-out;  }   .timeline ul li:nth-child(odd) div {  transform: translate3d(200px, 0, 0);  }   .timeline ul li:nth-child(even) div {  transform: translate3d(-200px, 0, 0);  }   .timeline ul li.in-view div {  transform: none;  visibility: visible;  opacity: 1;  }  .content{  display: inline-block;  }   /* GENERAL MEDIA QUERIES  –––––––––––––––––––––––––––––––––––––––––––––––––– */   @media screen and (max-width: 900px) {  .timeline ul li div {  width: 250px;  }  .timeline ul li:nth-child(even) div {  left: -289px;  /*250 45-6*/  }  }   @media screen and (max-width: 600px) {  .timeline ul li {  margin-left: 20px;  }  .timeline ul li div {  width: calc(100vw - 91px);  }  .timeline ul li:nth-child(even) div {  left: 45px;  }  .timeline ul li:nth-child(even) div::before {  left: -15px;  border-width: 8px 16px 8px 0;  border-color: transparent #ff0015 transparent transparent;  }  }