I am trying to make a hovercard effect using SVG and JavaScript such as Wikipedia and Facebook.
but how to fix the top triangle position when hovering on elements.
I need to fix the triangle position and the hovering action like Wikipedia or facebook.
(NOTE: I have some problem in my css and js link. I am a new programmer, I want to learn more), Sorry for that.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Wikipedia Hover Effects</title>
<style>
.content {
font-family: Segoe UI;
border: 1px solid #ddd;
padding: 30px;
box-sizing: border-box;
line-height: 27px;
}
.v-content-modal {
position: absolute;
background: #fff;
box-shadow: 0 3px 20px 0 #ddd;
width: 350px;
border-top: 3px solid #ddd;
display: none;
box-sizing: border-box;
}
.v-content-modal .modal-title {
background: #f5f5f5;
padding: 0 1.25rem;
font-size: .95rem;
letter-spacing: .03rem;
line-height: 38px;
height: 35px;
border-bottom: 1px solid #ddd;
}
.v-content-modal .modal-content {
padding: 1.75rem 1.25rem;
}
.v-content-modal::before {
content: "";
position: absolute;
top: -23px;
left: 30px;
border: 10px solid transparent;
border-color: transparent transparent #ddd transparent;
}
</style>
</head>
<body>
<div class="content">
Lorem ipsum dolor sit amet One
adipisicing elit. Quisquam, modi neque! Cupiditate itaque vitae aliquid
Two,
pariatur qui sequi minima voluptates voluptatibus quae
nemo! Suscipit Three quibusdam
dignissimos vitae, cum cumque voluptates et hic doloribus dicta, <a href="#" data-title="Four"
data-content="I am the Forth one/" id="info">Four</a> quos,
nostrum in.
</div>
<div class="v-content-modal">
<div class="modal-title">
Title
</div>
<div class="modal-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, quam.
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function () {
let modal = $(".v-content-modal");
let title = $(".v-content-modal > .modal-title");
let content = $(".v-content-modal > .modal-content");
let btns = document.querySelectorAll("#info");
btns.forEach(btn => {
btn.addEventListener("mousemove", (e) => {
modal.css({
top: 'unset',
right: 'unset',
left: 'unset',
bottom: 'unset'
});
title.html(e.target.getAttribute('data-title'));
content.html(e.target.getAttribute('data-content'));
let pageX, pageY, winWidth, winHeight, elmWidth, elmHeight, width_limit, height_limit = '';
pageX = e.pageX;
pageY = e.pageY;
winWidth = $(window).width();
winHeight = $(window).height();
elmWidth = $(".v-content-modal").width();
elmHeight = $(".v-content-modal").height();
width_limit = winWidth - elmWidth;
height_limit = winHeight - elmHeight;
(pageX > width_limit) ? crossWidth(): normalWidth();
(pageY > height_limit) ? crossHeight(): normalHeight();
function crossWidth() {
modal.css({
right: '5px'
});
}
function normalWidth() {
modal.css({
left: pageX
});
}
function crossHeight() {
modal.css({
bottom: '111px'
});
}
function normalHeight() {
modal.css({
top: e.pageY + 30 + 'px'
});
}
// show when all customization is completed...
modal.show();
});
btn.addEventListener("mouseleave", () => {
modal.hide();
});
});
});
</script>
</body>
</html>
Again,
<div class="content">
Lorem text Mark Info will show here when you hover Dummy text You will show here when you hover on it
</div>
//Define one time only
<div class="modal" style="display: none">
<div class="modal-title"> </div>
<div class="modal-content"> </div>
</div>
when you hover on any <a> it will be show all the info by using the link addr "/wiki/mark" or "/wiki/you"
#we don't need to assign all info every time!
You can use the Bootstrap framework for such an effect. It is very easy!
You connect js and css Bootstrap files, connect the Poper.js (on the same page) and you can just copy the Bootstrap elements to your project and use it as you want.
You can see the element itself at this link. It is called a tooltips.
Related
Google uses a feedback feature that highlights the background color of content elements (ex:p, div, ul, h2, etc.) when the user mouses over a div to the right side of the content.
I believe the following CSS class is applied to the element to highlight its background:
.inline-feedback__highlight {
background: #d2e3fc;
-webkit-border-radius: .3125rem;
border-radius: .3125rem;
}
Using jQuery or JavaScript and CSS, I'd like to achieve the same result.
My Question
How can I identify what the closest element in <div id="content">...</div> is?
I was thinking some form of x,y coordinates and offset from the top of the content div.
My Code
$(function() {
let halfBtnHt = Math.ceil($('#track-button-div').height() / 2);
$('#track-container').on('mousemove', function(e) {
// console.log(e.offsetX, e.offsetY);
$('#track-button').css({
'transform': `translateX(0) translateY(${e.offsetY - halfBtnHt}px)`,
'visibility': 'visible',
})
}).on('mouseout', function(e) {
$('#track-button').css({
'visibility': 'hidden'
})
})
})
#content-container {
position: relative;
border: 1px solid black;
width: 500px;
height: auto;
margin: 100px auto;
}
#content {
padding: 2rem;
}
#track-container {
position: absolute;
text-align: center;
top: 0;
bottom: 0;
width: 64px;
right: -56px;
z-index: 1;
}
#track-button {
width: 42px;
height: 42px;
border-radius: 30px;
pointer-events: none !important;
}
#track-button-div {
visibility: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="content-container">
<div id="content">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, iusto? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dolores earum esse eveniet libero minima pariatur repellat sed sunt ut?</div>
<pre class="prettyprint linenums prettyprinted">
<ol class="linenums">
<li class="L0">Hey</li>
</ol>
</pre>
<p>Blanditiis corporis ducimus laudantium nisi pariatur quasi repellat sunt, ut? Consequuntur dolores earum</p>
</div>
<div id="track-container">
<div id="track-button-div">
<button id="track-button" class="btn btn-outline-primary">
<i class="fas fa-quote-right"></i>
</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="track.js"></script>
</body>
</html>
Here's what Google's Feedback Feature Looks Like
Look at snippet below:
(function ($) {
'use strict';
$(function () {
var
namespace = 'mmdm',
//-----
mainElementID = '#__elements_container',
highlightClass = 'founded-element__highlight',
//-----
mainElement = $(mainElementID),
movableElementContainer = $('#__movable_element_container'),
movableElement = $('#__movable_element');
// some utility
function getTouch(event) {
var touch = event;
if (('ontouchstart' in document.documentElement) || navigator.maxTouchPoints > 0) {
touch = event.originalEvent.touches && event.originalEvent.touches.length ? event.originalEvent.touches[0] : event;
if (event.type === 'touchstart' || event.type === 'touchmove') {
touch = event.targetTouches[0] || event.changedTouches[0];
}
}
return touch;
}
// define function(s)
function removeHighlightClass() {
mainElement.find('*').removeClass(highlightClass);
}
function findElementsWithSameYNHighlightIt(e) {
var x, y, meOffset, el;
meOffset = mainElement.offset();
x = (e.pageX - meOffset.left) / 2;
y = e.pageY - $(window).scrollTop();
el = document.elementFromPoint(x, y);
if (!$(el).is(mainElement) && $(el).closest(mainElementID).length) {
$(el).addClass(highlightClass);
}
}
function showMovableElement() {
movableElement.addClass('show');
}
function hideMovableElement() {
movableElement.removeClass('show');
}
function moveMovableElement(e) {
var y, mecTop = movableElementContainer.offset().top;
y = e.pageY;
// bound move to the main movable container
if (y >= mecTop && y <= (mecTop + movableElementContainer.outerHeight())) {
movableElement.css({
'top': y - mecTop - (movableElement.outerHeight() / 2)
});
}
removeHighlightClass();
}
// attach event(s)
movableElementContainer
.on('mousemove.' + namespace + ' touchmove.' + namespace + ' mouseenter.' + namespace + ' touchstart.' + namespace, function (e) {
if (!e.defaultPrevented && e.cancelable) {
e.preventDefault();
}
//-----
var touch = getTouch(e);
showMovableElement();
moveMovableElement(touch);
findElementsWithSameYNHighlightIt(touch);
}).on('mouseleave.' + namespace + ' touchend.' + namespace, function (e) {
if (!e.defaultPrevented && e.cancelable) {
e.preventDefault();
}
//-----
hideMovableElement();
removeHighlightClass();
});
});
})(jQuery);
* {
box-sizing: border-box;
}
#__elements_main_container {
display: flex;
}
#__elements_container {
width: 500px;
}
#__movable_element_container {
position: relative;
width: 40px;
}
#__movable_element_container::after {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 1px;
height: 100%;
background-color: #ccc;
transform: translate(-50%);
z-index: 1;
}
#__movable_element {
position: absolute;
display: none;
align-items: center;
justify-content: center;
left: 50%;
width: 40px;
height: 40px;
text-align: center;
border-radius: 50rem;
border: 1px solid #ccc;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, .26);
transform: translate(-50%);
z-index: 2;
}
#__movable_element.show {
display: flex;
}
.founded-element__highlight {
background-color: #cecdff;
border-radius: 3px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="__elements_main_container">
<div id="__elements_container">
<h1>
A heading tag!
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<ul>
<li>First list item</li>
<li>Second list item</li>
</ul>
</div>
<div id="__movable_element_container">
<i id="__movable_element" class="fa fa-quote-right"></i>
</div>
</div>
Please don't judge the code quality, I made it just for the sake of testing and making it do what you initially asked about selecting the closest element.
Check this sandbox with a working example
The key here is the usage of elementFromPoint function, the sandbox should just give a general idea and you can tailor it to your needs!
I'm having a small issue regarding the dark background that is appearing when clicking on the second image with pink background. How can I make it cover the images but not the dialog box?
Because of the customized libary of jQuery UI, I can't use modal: true
How can I make it cover the images but not the dialog box?
$(function() {
$("#dialog").dialog({
//modal: true,
autoOpen: false,
open: function(e) {
$('body').addClass('modal');
},
close: function(e) {
$('body').removeClass('modal');
}
});
$(".images").find("a").eq(1).on('click', function(e) {
e.preventDefault();
/*setTimeout(() => {
window.location.href = $(this).prop("href");
}, 5000);*/
$("#dialog").dialog("open");
});
});
#dialog {
display: none;
}
img {
width: 300px;
height: 250px;
object-fit: cover;
}
.modal {
background-color: black;
opacity: 1;
overflow: auto;
z-index: 1;
}
<!-- These scripts include the full jQuery UI -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src=""></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<div class="images">
<a href="https://www.site1.com">
<img src="https://images.pexels.com/photos/413727/pexels-photo-413727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Image 1">
</a>
<a href="https://www.site2.com">
<img src="https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
</a>
</div>
<div id="dialog" title="Lorem ipsum">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod amet, et minus commodi repellendus hic? Ut eos blanditiis quis provident.</p>
</div>
If you really to want black out out all the div behind your jQuery dialog box then need to wrap your images in a div and do CSS on that instead of using body here then.
Also, we do not need opacity anymore since all the color will be darker. You can either use CSS::after or CSS::before to do that.
For better practice: (in your case) I have wrapped the images div in this div in new div .modal-body to achieve those results.
Live Working Demo:
$(function() {
$(".images").find("a").eq(1).on('click', function(e) {
e.preventDefault();
$("#dialog").dialog({
autoOpen: false,
open: function(e) {
$('body').addClass('modal');
},
close: function(e) {
$('body').removeClass('modal');
}
}).dialog("open");
setTimeout(() => {
//window.location.href = $(this).prop("href");
}, 50000);
});
});
#dialog {
display: none;
}
img {
width: 300px;
height: 250px;
object-fit: cover;
}
.modal {
background-color: pink;
}
.modal:after {
content: '';
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: pink;
}
<!-- These scripts include the full jQuery UI -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src=""></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<div class="modal-body">
<div class="images">
<a href="https://www.site1.com">
<img src="https://images.pexels.com/photos/413727/pexels-photo-413727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Image 1">
</a>
<br>
<a href="https://www.site2.com">
<img src="https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
</a>
</div>
<div id="dialog" title="Lorem ipsum">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod amet, et minus commodi repellendus hic? Ut eos blanditiis quis provident.</p>
</div>
</div>
The web browser prints the HTML content on the page using a tree structure.
So, the body tag is the deeper tag in your page. Because of that, the background black on body can't cover the other elements inside of it.
Just create a div tag between .images and #dialog, called #modal-background for example. Then, when you open or close the modal, shown and hide #modal-background.
The style of can be like that:
#modal-background.modal {
width: 100%;
height: 100%;
opacity: 1;
overflow: auto;
z-index: 1;
background-color: black;
}
```
Use the CSS ::after pseudo-element.
Please remove background-color: black; CSS from .modal. Just add below CSS.
.modal:after {
content: '';
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
The styles and considerations in this technique are pretty much easy, we’ll be styling the :after pseudo-element on the body. You can choose to position the pseudo-element absolutely with respect to the body, or give it a fixed position.
Updated Snippet :-
$(function() {
$("#dialog").dialog({
//modal: true,
autoOpen: false,
open: function(e) {
$('body').addClass('modal');
},
close: function(e) {
$('body').removeClass('modal');
}
});
$(".images").find("a").eq(1).on('click', function(e) {
e.preventDefault();
/*setTimeout(() => {
window.location.href = $(this).prop("href");
}, 5000);*/
$("#dialog").dialog("open");
});
});
#dialog {
display: none;
}
img {
width: 300px;
height: 250px;
object-fit: cover;
}
.modal {
opacity: 1;
overflow: auto;
z-index: 1;
}
.modal:after {
content: '';
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
<!-- These scripts include the full jQuery UI -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src=""></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<div class="images">
<a href="https://www.site1.com">
<img src="https://images.pexels.com/photos/413727/pexels-photo-413727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Image 1">
</a>
<a href="https://www.site2.com">
<img src="https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
</a>
</div>
<div id="dialog" title="Lorem ipsum">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod amet, et minus commodi repellendus hic? Ut eos blanditiis quis provident.</p>
</div>
I am expecting result: as I've implemented this codes for hover popup in website, as website is dynamic in nature. When I see the result in mobile version, same code is not working.
As I've used js for this, let me know any other way to tackle this situation.
Expected output is in image below:
Here's why I've tried.
jQuery(function($) {
var pop = $('.map-popup');
pop.click(function(e) {
e.stopPropagation();
});
$('a.marker').mouseenter(function(e) {
e.preventDefault();
e.stopPropagation();
$(this).next('.map-popup').toggleClass('open');
$(this).parent().siblings().children('.map-popup').removeClass('open');
});
$(document).click(function() {
pop.removeClass('open');
});
pop.each(function() {
var w = $(window).outerWidth(),
edge = Math.round( ($(this).offset().left) + ($(this).outerWidth()) );
if( w < edge ) {
$(this).addClass('edge');
}
});
});
.markerstylea1{
overflow: auto;
height:170px;
width:350px; }
.map-popup {
position: absolute;
left: 58px;
width: auto;
transform: translateY(-50%);
padding: 5px 15px;
}
.map-popup:before {
content: "";
position: absolute;
top: 50%;
left: -16px;
margin-top: -16px;
width: 0;
height: 0;
border-style: solid;
border-width: 16px 16px 16px 0;
border-color: transparent #feb830 transparent transparent;
}
.map-popup .popup-title{
font-size: 20px!important;
}
.map-popup.edge {
left: auto;
right: calc(100% + 24px);
}
.map-popup.edge:before {
left: auto;
right: -16px;
border-width: 16px 0 16px 16px;
border-color: transparent transparent transparent #fff;
}
.marker::selection {
background: #feb82f;
color: #fff;
text-shadow: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<a class="marker marker1 markerstyle1a" href="#marker1" >
<i class="fa fa-thumb-tack" aria-hidden="true"></i>
</a>
<aside id="marker1" class="map-popup markerstyle1" >
<h3 class="popup-title">xyz</h3>
<p><strong>xyz</strong><br>Lorem ipsum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia pariatur laudantium deserunt minima delectus illum dolor, nesciunt sit iure, debitis eligendi blanditiis, tempore quidem cupiditate quaerat incidunt sapiente aliquam? Debitis!</p>\
<a class="btn" href="#">Find Out More</a>
</aside>
</div>
Unfortunately a mobile device has no 'hover' status as you can only click (touch). There is simply no mouse to trigger a hover state. Another way would be to have the trigger to open the modal on something else for mobile devices, such as a timed trigger or a button.
I'm trying to achieve smooth page scrolling how ever i feel like this implementation will effect performance since i'm using infinity requestAnimationFrame, my question is is there is any better solution to my implantation ? or the whole code is just bad and cannot be fixed ?
update
i'm just trying to achieve whole page smooth scrolling not anchor link
like those website for example
https://www.aristidebenoist.com/
http://www.thibaudallie.com/
const body = document.body,
scrollWrap = document.getElementsByClassName("smooth-scroll-wrapper")[0],
height = scrollWrap.getBoundingClientRect().height - 1,
speed = 0.04;
var offset = 0;
body.style.height = Math.floor(height) + "px";
function smoothScroll() {
offset += (window.pageYOffset - offset) * speed;
var scroll = "translateY(-" + offset + "px) translateZ(0)";
scrollWrap.style.transform = scroll;
callScroll = requestAnimationFrame(smoothScroll);
}
smoothScroll();
html {
overflow-x: hidden;
}
html, body {
margin: 0;
padding: 0;
background: #161616;
color: #fff;
font-family: "Neue Machina";
}
body {
overflow: hidden;
width: 100%;
}
.smooth-scroll-wrapper {
position: fixed;
z-index: 2;
top: 0;
left: 0;
overflow: hidden;
}
.content {
font-size: 100px;
}
<div class="smooth-scroll-wrapper">
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam excepturi tenetur sapiente
dolor deleniti. Fuga labore pariatur esse. Repudiandae,voluptates nisi soluta architecto
inventore hic. Omnis eos expedita sed architecto illum mollitia! Totam aperiam
velconsequuntur a, ipsum sapiente sit laborum exercitationem distinctio labore praesentium
</div>
</div>
Update
Added a key and scroll handler functions:
window.addEventListener('keydown', smoothScroll);
window.addEventListener('wheel', fastScroller, {passive: true});
Press the D key to scroll down
Press the U key to scroll up
Keep either D or U key pressed to continue to scroll (not so much for Chrome)
Press the S key to bind the window to the wheel event*
Press the X key to unbind the window to the wheel event
* when window is bound to the wheel event, smooth scrolling automatically scrolls in the direction to which the user
rolls the mouse wheel
Here's a simple CSS property:
:root {scroll-behavior: smooth;}
scroll-behavior: smooth
Demo
Note: View demo in full page mode.
window.addEventListener('keydown', smoothScroll);
function smoothScroll(event) {
let direction = event.key.toLowerCase() === 'd' ? 1000 : event.key.toLowerCase() === 'u' ? -1000 : 0;
if (event.key.toLowerCase() === 's') {
window.addEventListener('wheel', fastScroller, {passive: true});
} else if (event.key.toLowerCase() === 'x') {
setTimeout(function() {
window.removeEventListener('wheel', fastScroller, {passive: true});
}, 1000);
}
window.scrollBy({
top: direction,
left: 0,
behavior: 'smooth'
});
}
let prevST = 0;
function fastScroller(event) {
const ST = window.scrollY;
let direction = ST > prevST ? 3000 : -3000;
prevST = ST;
window.scrollBy({
top: direction,
left: 0,
behavior: 'smooth'
});
}
:root {scroll-behavior: smooth;}
section {text-align:center;height: 100vh;font-size:5rem;border:5px solid #000;}
section::before {content: attr(id);}
a {display:inline-block; font-size: 5rem; color: gold}
a::before {content: attr(href);}
#I {background: blue;}
#II {background: red;}
#III {background: grey;}
#IV {background: green;}
#V {background: black; color: white}
#VI a {color: black;}
#VII {background: chocolate;}
#VIII {background: yellow;}
#VIII a {color: black;}
#IX {background: purple; color: white;}
#X {background: maroon; color: white;}
<main>
<section id='I'>
<a href='#II'></a>
<a class='bottom' href='#X'></a>
</section>
<section id='II'>
<a href='#III'></a>
<a href='#VI'></a>
</section>
<section id='III'>
<a href='#IV'></a>
<a href='#VIII'></a>
</section>
<section id='IV'>
<a href='#V'></a>
<a href='#VII'></a>
</section>
<section id='V'>
<a href='#VI'></a>
<a href='#I'></a>
</section>
<section id='VI'>
<a href='#VII'></a>
<a href='#X'></a>
</section>
<section id='VII'>
<a href='#VIII'></a>
<a href='#V'></a>
</section>
<section id='VIII'>
<a href='#IX'></a>
<a href='#IV'></a>
</section>
<section id='IX'>
<a href='#X'></a>
<a href='#VII'></a>
</section>
<section id='X'>
<a class='top' href='#I'></a>
<a href='#VI'></a>
</section>
</main>
My navbar have a title named LOGO ABCD,
I try to set when scrolling down change colour by adding and removing class,
but no idea why not work
LOGO ABCD
A
B
C
D
nav.navbar {
transition: 0.5s;
}
nav.navbar.navbar-default.navbar-fixed-top.navbar-top {
background-color: Black;
}
nav.navbar.navbar-default.navbar-fixed-top.navbar-top a {
color : white;
}
nav.navbar.navbar-default.navbar-fixed-top.navbar-top a:hover {
color : yellow;
}
$(window).scroll(function(evt){
if ($(window).scrollTop()>0)
$(".navbar").removeClass("navbar-top");
else
$(".navbar").addClass("navbar-top");
});
.PJ_title{color:grey;}
.PJ_color{color:red;}
$(window).scroll(function(evt){
if ($(window).scrollTop()>300)
$(".PJ_title").removeClass("PJ_color");
else
$(".PJ_title").addClass("PJ_color");
});
I test and "Test Title" has changed color successfully.
You can run lower snippet and scroll down and see change color. What's the problem?
$(window).scroll(function(evt){
if ($(window).scrollTop()>0)
$(".navbar").removeClass("navbar-top");
else
$(".navbar").addClass("navbar-top");
});
$(window).scroll(function(evt){
if ($(window).scrollTop()>300)
$(".PJ_title").removeClass("PJ_color");
else
$(".PJ_title").addClass("PJ_color");
});
nav.navbar {
transition: 0.5s;
}
nav.navbar.navbar-default.navbar-fixed-top.navbar-top {
background-color: Black;
}
nav.navbar.navbar-default.navbar-fixed-top.navbar-top a {
color : white;
}
nav.navbar.navbar-default.navbar-fixed-top.navbar-top a:hover {
color : yellow;
}
.PJ_title{color:grey;}
.PJ_color{color:red;}
.PJ_title{ position: fixed; }
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body style='height: 1000px'>
<nav class='navbar navbar-default navbar-fixed-top navbar-top'>
<a>Test</a>
</nav>
<h1 class='PJ_title'>Test Title</h1>
</body>
</html>
Here's how you can do this. In the scroll function use, this.scrollY. Based on the value, add or remove classes as you see fit.
$(document).ready(function() {
$(window).scroll(function(evt) {
var scrollPos = this.scrollY;
if (scrollPos > 200) {
$(".navbar").removeClass("navbar-green");
$(".navbar").addClass("navbar-blue");
} else {
$(".navbar").addClass("navbar-green");
$(".navbar").removeClass("navbar-blue");
}
});
});
nav.navbar {
background-color: #ccc;
transition: all 0.5s ease-out;
}
nav.navbar-fixed-top {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.extra-long {
height: 200vw;
}
nav.navbar-green {
background-color: green;
}
nav.navbar-blue {
background-color: blue
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="extra-long">
<nav class="navbar navbar-fixed-top">
<p>LOGO ABCD</p>
<p>A</p>
</nav>
</div>
Here's a version of your code cleaned up that works. You'll have to change the color as needed:
const w = $(window);
const header = $('#main-header');
w.on('scroll', function() {
if(w.scrollTop() > 0) {
header.addClass('header-secondary');
} else {
header.removeClass('header-secondary');
}
});
html {
height: 100%;
}
body {
margin: 0;
font-family: sans-serif;
height: 100%;
}
header {
width: 100%;
display: flex;
position: fixed;
align-items: center;
background-color: #ccc;
height: 50px;
transition: background-color ease .3s;
}
header nav {
margin-left: auto;
padding-right: 15px;
}
header nav a {
text-decoration: none;
}
#logo {
font-weight: 700;
padding-left: 15px;
}
.header-secondary {
background-color: darkblue;
color: #fff;
}
.header-secondary nav a {
color: #fff;
}
main {
padding: 65px 15px 0;
background-color: salmon;
height: 200%;
}
main p {
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="main-header">
<p id="logo">LOGO ABCD</p>
<nav>
item
item
item
</nav>
</header>
<main>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis adipisci totam odit natus voluptates ducimus impedit provident eum quia asperiores vitae neque ullam deserunt enim dolore minima, cum, perferendis et laborum. Magni, odit. Ducimus reiciendis illo assumenda dignissimos? Quidem eligendi molestiae atque mollitia, exercitationem officia. Debitis incidunt voluptas explicabo aliquam.</p>
</main>