Hi Guys,
In this blog you can find code snippet which help you to create a sticky block which remain fixed while scrolling.
In html you have to add following code.
When page loads directive "sticky" binds scroll event on div element
You can find implementation code below
Good Day :)
In this blog you can find code snippet which help you to create a sticky block which remain fixed while scrolling.
In html you have to add following code.
<div sticky style="width:100%;color:red"> This is a sticky block </div>
When page loads directive "sticky" binds scroll event on div element
angular.element($window).on('scroll', function (e) {
if($window.scrollY >=100){
element.addClass("sticky");
}else{
element.removeClass("sticky");
}
});
You can find implementation code below
index.html
<html ng-app="simpleDirective"> <head> <script src="angular.min.js"></script> <script src="jquery.js"></script> <script src="app.js"></script> </head> <body style="margin:0;padding:0;"> <div ng-controller="Controller"> <div sticky style="width:100%;color:red"> This is a sticky block </div> <br/> Donec consectetur accumsan sagittis. Proin sed magna ac diam bibendum efficitur. Mauris luctus, mauris eu consequat sagittis, nunc enim vehicula lorem, pulvinar malesuada nulla metus at tortor. Morbi nulla quam, accumsan et pulvinar nec, commodo vel eros. Aenean fringilla eros ac nibh sodales dapibus. Fusce at nulla elit. Duis maximus tellus orci, eu malesuada nibh mollis quis. Proin viverra dolor in diam posuere, quis dapibus eros tincidunt. Nullam id dictum ante, sit amet suscipit massa. Phasellus nisl est, dictum id lorem sed, lacinia vulputate purus. Suspendisse potenti. Donec vitae porta lorem, sit amet porttitor dui. Nam ultrices lacus odio, id venenatis nulla pellentesque eleifend. Sed risus quam, sollicitudin quis elementum a, faucibus non justo. Vestibulum faucibus velit quis fermentum condimentum. Pellentesque libero tellus, iaculis eget vulputate in, elementum id lectus. Aliquam erat volutpat. Proin sollicitudin a mauris quis egestas. Nam vulputate interdum felis in tincidunt. Mauris mattis diam vitae risus blandit, et posuere libero aliquam. Duis vulputate sed tortor vitae gravida. Proin ut urna pretium metus viverra dapibus. Duis non justo dolor. Nam vehicula facilisis enim, quis mattis erat facilisis ac. Curabitur efficitur magna sed egestas commodo. Curabitur lorem ipsum, sagittis sed lacus vitae, consectetur facilisis sapien. Nam aliquet nibh justo, vel fringilla nisi venenatis at. Sed ac blandit nulla, a tempus nisl. Ut convallis lorem a arcu aliquet vestibulum. Pellentesque sed ex ac nisi luctus scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet ipsum vel metus iaculis rhoncus eu a magna. Nullam porttitor et est ut consectetur. Duis tincidunt, est at mattis sagittis, tortor ipsum pharetra ante, et luctus tellus nisi non turpis. Nam nec maximus mi. Cras ut tellus metus. Ut faucibus felis at rutrum rhoncus. Vestibulum venenatis purus eu elit vestibulum, in tincidunt est euismod. Nullam sit amet augue quis eros dapibus ultrices vel eget enim. Curabitur feugiat elit ante, vel dapibus nulla pretium quis. Vivamus a vulputate orci. Vestibulum pellentesque mattis finibus. Sed elementum libero ut odio dictum sodales. Sed auctor metus ac tristique tempus. Mauris a aliquam odio. Donec consectetur accumsan sagittis. Proin sed magna ac diam bibendum efficitur. Mauris luctus, mauris eu consequat sagittis, nunc enim vehicula lorem, pulvinar malesuada nulla metus at tortor. Morbi nulla quam, accumsan et pulvinar nec, commodo vel eros. Aenean fringilla eros ac nibh sodales dapibus. Fusce at nulla elit. Duis maximus tellus orci, eu malesuada nibh mollis quis. Proin viverra dolor in diam posuere, quis dapibus eros tincidunt. Nullam id dictum ante, sit amet suscipit massa. Phasellus nisl est, dictum id lorem sed, lacinia vulputate purus. Suspendisse potenti. Donec vitae porta lorem, sit amet porttitor dui. Nam ultrices lacus odio, id venenatis nulla pellentesque eleifend. Sed risus quam, sollicitudin quis elementum a, faucibus non justo. Vestibulum faucibus velit quis fermentum condimentum. Pellentesque libero tellus, iaculis eget vulputate in, elementum id lectus. Aliquam erat volutpat. Proin sollicitudin a mauris quis egestas. Nam vulputate interdum felis in tincidunt. Mauris mattis diam vitae risus blandit, et posuere libero aliquam. Duis vulputate sed tortor vitae gravida. Proin ut urna pretium metus viverra dapibus. Duis non justo dolor. Nam vehicula facilisis enim, quis mattis erat facilisis ac. Curabitur efficitur magna sed egestas commodo. Curabitur lorem ipsum, sagittis sed lacus vitae, consectetur facilisis sapien. Nam aliquet nibh justo, vel fringilla nisi venenatis at. Sed ac blandit nulla, a tempus nisl. Ut convallis lorem a arcu aliquet vestibulum. Pellentesque sed ex ac nisi luctus scelerisque. </div> </body> </html>
app.js
var app = angular.module('simpleDirective', []);
app.controller('Controller', ['$scope', function($scope) {}]);
app.directive("sticky", function($window){
return{
link: function(scope, element, attrs){
angular.element($window).on('scroll', function (e) {
if($window.scrollY >=100){
element.addClass("sticky");
}else{
element.removeClass("sticky");
}
});
}
}
});
style
.sticky{
top:0px;
position:fixed;
background:white;
padding:10px;
border-bottom:1px solid black;
}
Good Day :)
0 Comments