Scrolling middle DIV in a 3 column with Laravel
Use Case Scenario:
A custom application made using Laravel used a 3 column div as a layout. The requirement would have the user scroll the middle Div only when the user scrolls the page. This is somewhat similar to the Linkedin page.
Create a new page named stickydiv.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row mt-4">
</div>
</div>
@endsection Within the new page, create a 3 column div layout
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row mt-4">
<div class="col-md-3 ">
</div>
<div class="col-md-6">
</div>
<div class="col-md-3 ">
</div>
</div>
</div>
@endsection Write some content inside the 3 columns. Place more content in the middle column
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row mt-4">
<div class="col-md-3 ">
<h3>Column A</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<div class="col-md-6">
<h3>Column B</h3>
<div class="pt-2">
<h5> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
(Add more longer content) </h5>
</div>
</div>
<div class="col-md-3 ">
<h3>Column C</h3>
<div class="card card-widget widget-user">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
</div>
</div>
</div>
</div>
</div>
@endsection Add the sticky class in the 1st and 3rd column
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row mt-4">
<div class="col-md-3 ">
<div class="sticky-top">
<h3>Column A</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
</div>
<div class="col-md-6">
<h3>Column B</h3>
<div class="pt-2">
<h5> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
(Add more longer content) </h5>
</div>
</div>
<div class="col-md-3 ">
<div class="sticky-top">
<h3>Column C</h3>
<div class="card card-widget widget-user">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
</div>
</div>
</div>
</div>
</div>
</div>
@endsection Create a route to the stickydiv page inside web.php
Route::get('/stickydiv', [HomeController::class, 'stickydiv'])->name('stickydiv');Create a stickydiv function inside HomeController.php
public function stickydiv()
{
return view('stickydiv');
}
Support WeHelpCode by subscribing to our YouTube Channel
Thanks