Главная » DARYA DLE » Скрипты » Самые необходимые скрипты
217 0  

Самые необходимые скрипты

Самые необходимые скрипты:

<script>
/* 1- неправильная обработка ссылки - */ $( document ).ready(function() { $( 'a[href="#"]' ).click( function(e) { e.preventDefault(); } ); });	

/* 2.1 Для фиксации меню при скроле вниз */
$(document).ready(function(){ var blockMenuID = '#menunav'; $(window).scroll(function() { var top = $(document).scrollTop();
if (top >= 5) { $(blockMenuID).addClass('nav-down');
 } else {  $(blockMenuID).removeClass('nav-down'); } }); });

/* 2.2 - добавление стиля при прокрутке вниз и забрать при движ. вверх */ 
window.addEventListener('scroll', function(e) { const oldScroll = this.oldScroll || 0,  newScroll = this.scrollY, isScrollDown = newScroll > oldScroll;
document.querySelector('.logotip').classList.toggle('logo-down', isScrollDown); this.oldScroll = newScroll; });
		
/* 3- плавная прокрутка вверх - */(function($) { $(function() {  $('#up').click(function() { $('html, body').animate({scrollTop: 0},700); return false; }) }) })(jQuery)
/* 4 - UP fiksacia */$(window).scroll(function(){ if ($(window).scrollTop() > 400) { $('.bg-up').addClass('actup'); } else { $('.bg-up').removeClass('actup'); } });
/* 5 -плавная прокрутка к месту */ $(document).ready(function(){ $('.go_to').click( function(){ var scroll_el = $(this).attr('href');  if ($(scroll_el).length != 0) { $('html, body').animate({ scrollTop: $(scroll_el).offset().top }, 900); } return false;  }); });
/* 6 - додавание класса по клику */$(function() {	$('.bcvet').on('click', function () { $('actkosh').toggle(); $(".bg-nav_kosh").toggleClass('actkosh'); return false; }); });
/* 7 - анимация полета в корзину */   $('.product-order').on('click', function(){ var that = $(this).closest('.product-item').find('img'); var bascket = $(".bascket");  var w = that.width();  that.clone() .css({'width' : w, 'position' : 'absolute', 'z-index' : '9999',	top: that.offset().top,	left:that.offset().left})  .appendTo("body") .animate({opacity: 0.05,  left: bascket.offset()['left'],  top: bascket.offset()['top'],  width: 20}, 1000, function() {	$(this).remove(); }); 	}); 
/* 8 - при hover сменить клас */  $(".bay-1").hover(function () { $('.bay-2').toggleClass("hovered"); }); 
 </script>

Если нужно додать и забрать клас при повторном клике - смотреть


FAQ:

2.1. Фиксация меню при скроле.

к блоку с айди #menunav при прокрутке вних добавляется класс .nav-down и уберается в самом вверху

изначально:
<header id="menunav" class="topmenu">----</header>
после прокрутки:
<header id="menunav" class="topmenu nav-down">----</header>


2.2 Смена стиля при прокрутке вниз и удаление при прокрутке вверх.

Блок с класом - .logotip при прокрутке вниз будет получать клас .logo-down

изначально:
<header class="logotip">----</header>
после прокрутки:
<header class="logotip logo-down">----</header>


8 - при hover на одном блоке сменить клас другого блока
Если навести курсор на .bay-1 то то к блоку с класом .bay-2 добавится класс - .hovered




Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2020