Когда каждый элемент .block
полностью показан (прокручен до конца) добавляем блоку .bullet
класс .active
$(document).ready(function(){
$(window).scroll(function(){
var scroll=parseInt($(window).scrollTop())+parseInt($(window).height());
$('.block').each(function(){
var offset=parseInt($(this).offset().top)+parseInt($(this).height());
if(scroll>offset){
$(this).find('.bullet').addClass('active');
}
});
});
});
В примере если опций 2 то выбирать последнюю
var select_format=$('select[name=format]');
var options_count=select_format.find('option').length;
if(options_count==2){
select_format.prop('selectedIndex',options_count-1).change();
}
Для ссылок на jpg, которые не открываются в новом окне:
$("a[href$='.jpg'][target!='_blank']").on("click",function(){
});
Вместо iframe
<iframe width="640" height="360" src="https://www.youtube.com/embed/<?=$item['youtube_id']?>?autoplay=0" allowfullscreen></iframe>
отображаем div
<div class="youtube" id="<?=$item['youtube_id']?>"></div>
css:
.youtube{
background-position:center;
background-repeat:no-repeat;
position:relative;
display:inline-block;
overflow:hidden;
transition:all 200ms ease-out;
cursor:pointer;
height:360px;
}
.youtube .play{
background:url('../images/youtube-play-btn.png') no-repeat;
background-position:0 -50px;
-webkit-background-size:100% auto;
background-size:100% auto;
position:absolute;
height:50px;
width:69px;
transition:none;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
cursor:pointer;
}
.youtube:hover .play{
background-position:0 0;
}
javascript:
'use strict';
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
r(function(){
if(!document.getElementsByClassName){
var getElementsByClassName=function(node, classname){
var a=[];
var re=new RegExp('(^| )'+classname+'( |$)');
var els=node.getElementsByTagName("*");
for(var i=0,j=els.length;i<j;i++)
if(re.test(els[i].className))a.push(els[i]);
return a;
}
var videos=getElementsByClassName(document.body,"youtube");
}
else{
var videos=document.getElementsByClassName("youtube");
}
var nb_videos=videos.length;
for (var i=0;i<nb_videos;i++){
videos[i].style.backgroundImage='url(https://i.ytimg.com/vi/'+videos[i].id+'/sddefault.jpg)';
var play=document.createElement("div");
play.setAttribute("class","play");
videos[i].appendChild(play);
videos[i].onclick=function(){
var iframe=document.createElement("iframe");
var iframe_url="https://www.youtube.com/embed/"+this.id+"?autoplay=1&autohide=1";
if(this.getAttribute("data-params"))iframe_url+='&'+this.getAttribute("data-params");
iframe.setAttribute("src",iframe_url);
iframe.setAttribute("frameborder",'0');
iframe.style.width=this.style.width;
iframe.style.height=this.style.height;
this.parentNode.replaceChild(iframe,this);
}
}
});
Картинка: youtube-play-btn.zip
На основе: https://sitehere.ru/uskorit-zagruzku-stranic-sajta
$.fn.stickyfloat=function(options,lockBottom){
var $obj=this;
var parentPaddingTop=parseInt($obj.parent().css('padding-top'));
var startOffset=$obj.parent().offset().top;
var opts=$.extend({startOffset:startOffset,offsetY:parentPaddingTop,duration:200,lockBottom:true},options);
$obj.css({position:'absolute'});
if(opts.lockBottom){
var bottomPos=$obj.parent().height()-$obj.height()+parentPaddingTop;
if(bottomPos<0)
bottomPos=0;
}
$(window).scroll(function(){
$obj.stop();
var pastStartOffset=$(document).scrollTop()>opts.startOffset;
var objFartherThanTopPos=$obj.offset().top>startOffset;
var objBiggerThanWindow=$obj.outerHeight()<$(window).height();
if((pastStartOffset||objFartherThanTopPos)&&objBiggerThanWindow){
var newpos=($(document).scrollTop()-startOffset+opts.offsetY);
if(newpos>bottomPos)
newpos=bottomPos;
if($(document).scrollTop()<opts.startOffset)
newpos=parentPaddingTop;
$obj.animate({top:newpos},opts.duration);
}
});
};
Пример использования:
$(document).ready(function(){
setTimeout(function(){
$('#main .left').css('min-height',$('#main').height());
$('#main .inner').stickyfloat({duration:500});
},2000);
});
<div id="main">
<div class="left">
<div class="inner">content</div>
</div>
<div class="right"></div>
<div class="clear"></div>
</div>
.left,.right{
width:50%;
}
.left{
position:relative;
float:left;
}
.right{
float:right;
}
.clear{
clear:both;
}
Источник: https://ruseller.com/lessons.php?id=999&rub=32