Теоретически вроде понимаю, но как это реализовать на JS не знаю, а полностью на CSS это не решить.
Изначально .topblock не фиксированный и в десктопном режиме скролится в месте со страницей. А в мобильном разрешении от 768рх и ниже он фиксированный и для лучшее визуального восприятия к нему добавляется тень и полупрозрачность. Для этого нужно отследить скрол и смену разрешения.
Можно конечно сразу в основной CSS добавить тень и полупрозрачность и отслеживать только скроллинг, изначально так и было и был простой скрипт
<script type='text/javascript'>
$(function(){
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top < 1) $('.topblock').css({'box-shadow':'none','background':'rgba(255,255,255,0.0)'});
else $('.topblock').css({'box-shadow':'0 0 2px rgba(0,0,0,0.5)','background':'rgba(255,255,255,0.9)'});
});
});
</script>
Но в десктопе считаю это лишним, потому пошёл дальше и дошёл до отслеживания разрешения и ресайза и заметил баги.