Skip to content

Instantly share code, notes, and snippets.

@noahub
Last active July 25, 2017 22:05
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save noahub/65ac6f11b3e91c8d92b3445157d5975f to your computer and use it in GitHub Desktop.
Save noahub/65ac6f11b3e91c8d92b3445157d5975f to your computer and use it in GitHub Desktop.
Fixed Video On-Scroll
<style>
/* Replace with your 'close' button ID */
#lp-pom-button-16 {
display:none;
}
.lp-pom-video{
transition:all 0.4s linear;
}
.smallVid {
left: 0 !important;
top: 0 !important;
z-index: 999 !important;
ms-transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
-webkit-transform-origin-x: 0;
-webkit-transform-origin-y: 0;
transform-origin:0 0;
position: fixed !important;
display: block !important;
box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.3);
}
.vidAdjust{
margin-top: 1%;
margin-left: 1%;
}
</style>
<script>
//Replace with your video's ID
var video = "#lp-pom-video-13";
//Replace with your 'close' button ID
var button = "#lp-pom-button-16";
//Optional: adjust in pixels when the video transitions
var showHeight = 400;
var targetClass = "smallVid";
var adjustClass = "vidAdjust";
var classSelect = ".smallVid";
var noClose = true;
var initWidth = $(video).width();
var initHeight = $(video).height();
$(window).scroll( function() {
if ($(this).scrollTop() > showHeight && noClose) {
$(video).addClass(targetClass + " " + adjustClass);
$(button).addClass(targetClass);
} else {
$(video).removeClass(targetClass, adjustClass);
$(button).removeClass(targetClass);
}
});
$(button).click(function(){
$(video).removeClass("smallVid vidAdjust");
$(button).removeClass("smallVid");
targetClass - null;
adjustClass - null;
noClose = false;
});
</script>
@threshnoberly
Copy link

view demo ???

@noahub
Copy link
Author

noahub commented Jul 25, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment