Владимир Ионенко

не знаю как с помощью бордера, но можно реализовать с помощью абсолютно расположенного єлемента. Примерно так :

.element {
	padding: 30px;
	background: #eee;
	position: relative;
	&:after {
		position: absolute;
		content:"";
		width: 0;
		height: 2px;
		background: red;
		bottom: 0;
		right: 0;
		left: 0;
		transition: all .5s;   
	} 

	&:hover {
		&:after {
			width: 100%; 
		}
	}
}

вот как это выглядит
https://jsfiddle.net/ionenkovladimir/qb5m057o/

Если я Вас правильно понял, то можно поступить следующим образом :

$(document).ready(function(){
     $(window).scroll(function(){
     	var headerHeight = $('.slider').height();
        if ($(this).scrollTop() >headerHeight) {
            $('.header').addClass("fixed");
        } else {
           $('.header').removeClass("fixed");
        }
    });
});

Ну и собственно добавить в css класс

.fixed {
  position:fixed;
  top: 0;
  left: 0;
  right: 0;
}